[WordPress] Fetching postów WP APIv2 Cross Domain

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:

1. 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
2. Tworząc dedykowaną wtyczkę pozwalającą na dodanie nowych domen CORS – optymalne rozwiązanie
3. 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.