Cel
Pobranie postów z bloga postawionego na CMS WordPress i stworzenie karuzeli postów na zewnętrznej domenie.
(eng. Fetching posts from wordpress blog and create carousel of posts on diferent page (not in blog domain).
Problem
Wysłanie zapytania z domeny Y na domenę X bez wcześniejszej integracji zwraca błąd/brak integracji CORS (Cross-Origin Resource Sharing).
Rozwiązanie
O ile fetching postów przy użyciu WP API v2 w obrębie tego samego bloga jest dziecinne proste, to pobranie postów z domeny A oraz wyświetlenie ich na domenie B wymaga większej ingerencji w kod.
Aby można było stworzyć połączenie pomiędzy dwoma domenami, należy wykonać 2 akcje.
Akcje po stronie domeny odpytującej – czyli tej na której chcemy wyświetlić posty.
function loadPostsFromWPv2(url) {
let request = new XMLHttpRequest();
request.open('GET', url);
request.onload = function () {
if ( request.status >= 200 && request.status < 400 ) {
let data = JSON.parse(request.responseText);
posts = data;
console.log(posts)
}
}
request.onerror = function () {
console.log('Something went wrong')
}
request.send();
}
loadPostsFromWPv2('https://pawelryt.pl/wp-json/wp/v2/posts');
Funkcja loadPostsFromWPv2 jest odpowiedzialna za wysłanie zapytania na przekazany w parametrze „url” adres. Zapytanie zostaje wysłane przy pomocy klasy XMLHttpRequest metodą GET.
Akcje po stronie domeny odpytywanej- czyli tej na której znajdują się porządane posty.
Aby reguła CORS pozwoliła nam pobrać posty z obcej domeny, po stronie backendu strony musimy zdefiniować domeny uprzywilejowane do fetchowania danych. Jako, że odpytywaną stroną jest blog postawiony na CMS WordPress, to możemy przygotować rozwiązanie na co najmniej 3 sposoby:
- Edytując plik: functions.php znajdujący się w folderze z motywem – wówczas wyłączając/zmieniając motyw pozbawiamy się konifguracji CORS – najszybsze rozwiązanie
- Tworząc dedykowaną wtyczkę pozwalającą na dodanie nowych domen CORS – optymalne rozwiązanie
- Edytując core’owe pliki WP – z każdą aktualizacją WordPress’a, zmiany będą nadpisywane – złe rozwiązanie
Edytując plik: functions.php znajdujący się w folderze z motywem
add_action( 'json_api', function( $controller, $method ) {
header( "Access-Control-Allow-Origin: *" );
}, 10, 2 );
Ustawiając parametr nagłówka header „Access-Control-Allow-Origin: *” sprawiamy że KAŻDA obca domena będzie mogła pobierać/fetchować dane z naszego bloga. Na potrzeby testów jest to akceptowalne rozwiązanie, natomiast my jesteśmy PRO (lub przynajmniej dążymy do tego ;)) dlatego gwiazdkę zastąpimy jednym adresem domeny dla której chcemy nadać uprawnienia.