WordPress tilpasset API-sluttpunkt POST-forespørsel mislykkes i React

Question

WordPress tilpasset API-sluttpunkt POST-forespørsel mislykkes i React

stemmer

16

Jeg har en WordPress-backend der jeg har lagt til mine egne tilpassede sluttpoeng til API:

// 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' ),
    )
);

Jeg har satt opp miljøet mitt slik: https://example.com er der React-applikasjonen bor, og WordPress er i en underkatalog, på https://example.com/wp

Min React-applikasjon sender POST- og GET-forespørsler til disse sluttpunktene ovenfor. Jeg har en produksjonsmiljøvariabel der jeg angir grunnadressen til API, som er https://example.com/wp/wp-json/game ('spillet' er mitt navnområde), og derfor kan jeg stille forespørsler med Axios til https://example.com/wp/wp-json/game/countries og https://example.com/wp/wp-json/game/check_answer og her kommer saken.

Serveren min er konfigurert slik at den serverer React-applikasjonen både som uten www . Så https://example.com og https://www.example.com begge deler den samme applikasjonen.

Men dette genererer noen interessante problemer for mine tilpassede sluttpunkter: GET-forespørselen fungerer alltid. men POST-forespørselen fungerer bare hvis jeg prøver den fra https://example.com , IKKE fra https://www.example.com . I tilfelle av sistnevnte viser det meg bare en mislykket forespørsel. Ingen respons, ingenting.

Jeg har googlet og det ser ut til å være relatert til CORS, men jeg klarte ikke å fikse det. Noen ideer her?

php reactjs wordpress cors wordpress-rest-api

Publisert på 09/05/2020 klokken 11:32
kilden bruker Danny Hobo

På andre språk...

2 svar

shazyriver · Answer 1 · 2020-05-17 10:38

Aller først vil jeg påpeke at din Get forespørsler fungerer fordi de tilhører kategorien som ikke utløser en forhåndslysforespørsel. Mens din Post forespørsel bruker sannsynligvis noen overskrifter som fjerner den fra kategorien og krever derfor at preflight skal passeres. Hvis du er interessert i å lese mer, her er dokumentasjonslenken.

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

I følge kommentaren din er feilen du får

Svar på forhåndslysforespørsel passerer ikke tilgangskontrollsjekk: Ingen 'Access-Control-Allow-Origin' -hode er til stede på den forespurte ressursen.

Metoden du bruker for å stille inn overskrifter, som du nevnte i en kommentar, fungerer ikke på hvileforespørsler. Du kan bruke funksjonen nedenfor i din functions.php eller en plugin-fil for å sette opprinnelsen til * .

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 );

Selv om jeg anbefaler hva WordPress gjør som standard. Hvis du sjekker wp-includes/rest-api.php du finner den opprinnelige funksjonen som jeg har endret for ditt formål. Hvis du er interessert i å ta en titt, er her sporingslenken.

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

Dmitry · Answer 2 · 2020-05-14 09:23

stemmer

0

Jeg fant problemet ditt du må fjerne fra url-en din wp og det skal fungere. For eksempel:

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

Bør være:

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

Du kan også sjekke denne opplæringen . Håper det hjelper deg.

Svarte 14/05/2020 kl. 09:23
kilden bruker Dmitry