WordPress aangepaste API-eindpunt POST-aanvraag mislukt in React

stemmen
16

Ik heb een WordPress backend waar ik mijn eigen aangepaste eindpunten aan de API heb toegevoegd:

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

Ik heb mijn omgeving zo ingericht: https://example.com is waar de React-applicatie woont, en WordPress staat in een subdirectory, op https://example.com/wp

Mijn React-applicatie maakt POST- en GET-verzoeken aan die eindpunten hierboven. Ik heb een productieomgeving variabele waar ik de basis URL van de API instel, die is (https://example.com/wp/wp-json/game'spel' is mijn naamruimte) en dus kan ik aanvragen doen met Axios https://example.com/wp/wp-json/game/countriesen https://example.com/wp/wp-json/game/check_answerhier komt het probleem.

Mijn server is zo geconfigureerd dat hij de React-applicatie zowel met als zonder www. Dus https://example.com en https://www.example.com dienen beide dezelfde applicatie.

Maar dit genereert een interessant probleem voor mijn aangepaste eindpunten: het GET-verzoek werkt altijd. maar de POST-aanvraag werkt alleen als ik het probeer van https://example.com, NIET van https://www.example.com . In het laatste geval laat het me gewoon een mislukte aanvraag zien. Geen antwoord, niets

Ik heb gegoogled en het lijkt verwant aan CORS, maar ik was niet in staat om het te repareren. Heb je nog ideeën?

De vraag is gesteld op 09/05/2020 om 11:32
bron van user
In andere talen...                            


2 antwoorden

stemmen
0

Allereerst wil ik erop wijzen dat uw Getverzoeken werken omdat ze tot de categorie behoren die geen preflightverzoek doet ontstaan. Terwijl uw Postverzoek waarschijnlijk een of andere header gebruikt die het uit de categorie verwijdert en dus een preflight nodig heeft om door te gaan. Als u geïnteresseerd bent in het lezen van meer, hier is de documentatie link.

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

Nu, volgens uw commentaar, is de fout die u krijgt

Reactie op een preflightaanvraag gaat niet door de toegangscontrole heen: Geen Access-Control-Allow-Origin' header is aanwezig op de gevraagde middel.

De methode die u gebruikt voor het instellen van koppen, zoals u in een commentaar vermeldde, werkt niet op rustverzoeken. U kunt onderstaande functie gebruiken in uw functions.phpof een plugin-bestand om de oorsprong in te stellen op *.

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

Hoewel ik aanraad wat WordPress standaard doet. Als u dit controleert wp-includes/rest-api.phpvindt u de originele functie die ik voor uw doel heb aangepast. Als u geïnteresseerd bent om een kijkje te nemen, hier is de trac-link.

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

antwoordde op 17/05/2020 om 10:38
bron van user

stemmen
0

Ik vond je probleem dat je moet verwijderen van je url wpen het zou moeten werken. Bijvoorbeeld:

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

Zou moeten:

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

U kunt deze tutorial ook bekijken. Ik hoop dat het je helpt.

antwoordde op 14/05/2020 om 09:23
bron van user

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