Niestandardowe żądanie punktu końcowego API WordPressa POST w React nie powiedzie się

głosy
4

Mam backend WordPressa, w którym dodałem do API swoje własne punkty końcowe:

// retrieve countries
register_rest_route( $namespace, '/countries',
    array(
        'methods'  => 'GET',
        'callback' => array( $this, 'get_countries' ),
    )
);

// check answer
register_rest_route( $namespace, '/check_answer',
    array(
        'methods'  => 'POST',
        'callback' => array( $this, 'check_answer' ),
    )
);

Skonfigurowałem swoje środowisko w następujący sposób: https://example.com to miejsce, gdzie mieszka aplikacja React, a WordPress jest w podkatalogu, na https://example.com/wp

Moja aplikacja React wykonuje żądania POST i GET do tych punktów końcowych powyżej. Mam zmienną środowiska produkcyjnego, gdzie ustawiam podstawowy adres URL API, który jest (https://example.com/wp/wp-json/gamegra to moja przestrzeń nazw) i dzięki temu mogę wysyłać żądania z Axiosem do https://example.com/wp/wp-json/game/countriesi https://example.com/wp/wp-json/game/check_answertu pojawia się problem.

Mój serwer jest tak skonfigurowany, że obsługuje aplikację React zarówno z jak i bez www. Tak więc https://example.com i https://www.example.com obsługują tę samą aplikację.

Ale to generuje pewien interesujący problem dla moich niestandardowych punktów końcowych: żądanie GET zawsze działa. ale żądanie POST działa tylko wtedy, gdy próbuję go z https://example.com, a nie z https://www.example.com . W przypadku tego ostatniego, po prostu pokazuje mi nieudane żądanie. Brak odpowiedzi, nic

Mam googlowane i wydaje się to być związane z CORS, ale nie byłem w stanie tego naprawić. Jakieś pomysły tutaj?

Utwórz 09/05/2020 o 11:32
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
0

Po pierwsze chciałbym zaznaczyć, że wasze Getżądania działają, ponieważ należą do kategorii, która nie wywołuje żądania wstępnego lotu. Podczas gdy Twoje Postżądanie prawdopodobnie używa jakiegoś nagłówka, który usuwa je z kategorii, wymagając tym samym przejścia przez prelight. Jeśli jesteś zainteresowany przeczytaniem więcej, tutaj jest link do dokumentacji.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

Teraz, zgodnie z twoim komentarzem, błąd, który dostajesz to

Odpowiedź na zapytanie wstępne nie przechodzi sprawdzenia kontroli dostępu: Nie Nagłówek "Access-Control-Allow-Origin" znajduje się na żądanej stronie zasób.

Metoda, której używasz do ustawiania nagłówków, jak wspomniałeś w komentarzu, nie działa na żądaniach odpoczynku. Możesz użyć poniższej funkcji w swoim functions.phplub pliku pluginu, aby ustawić pochodzenie na *.

function sr_rest_send_cors_headers( $value ) 
{   
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, PATCH, DELETE' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Vary: Origin', false );

    return $value;
}
add_filter( 'rest_pre_serve_request', 'sr_rest_send_cors_headers', 11 );

Chociaż polecam to, co WordPress robi domyślnie. Jeśli sprawdziszwp-includes/rest-api.php, znajdziesz oryginalną funkcję, którą zmodyfikowałem dla twojego celu. Jeśli jesteś zainteresowany obejrzeniem, tutaj znajduje się link trac.

https://core.trac.wordpress.org/browser/tags/5.4/src/wp-includes/rest-api.php#L574

Odpowiedział 17/05/2020 o 10:38
źródło użytkownik

głosy
0

Znalazłem twój problem, który musisz usunąć z twojego url wpi powinien zadziałać. Na przykład:

https://example.com/wp/wp-json/game/countries

Powinno być:

https://example.com/wp-json/game/countries

Również możesz sprawdzić ten tutorial. Mam nadzieję, że to ci pomoże.

Odpowiedział 14/05/2020 o 09:23
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more