La richiesta dell'endpoint API personalizzata WordPress POST di WordPress fallisce in React

voti
16

Ho un backend WordPress dove ho aggiunto i miei endpoint personalizzati all'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' ),
    )
);

Ho impostato il mio ambiente in questo modo: https://example.com è dove vive l'applicazione React, e WordPress è in una sottodirectory, su https://example.com/wp

La mia applicazione React fa richieste POST e GET a quegli endpoint di cui sopra. Ho una variabile dell'ambiente di produzione dove imposto l'URL di base dell'API, che è (https://example.com/wp/wp-json/gamegame è il mio spazio dei nomi) e quindi posso fare richieste con Axios a https://example.com/wp/wp-json/game/countriese https://example.com/wp/wp-json/game/check_answered ecco che arriva il problema.

Il mio server è configurato in modo da servire l'applicazione React sia con che senza www. Quindi https://example.com e https://www.example.com servono entrambi la stessa applicazione.

Ma questo genera qualche problema interessante per i miei endpoint personalizzati: la richiesta GET funziona sempre. ma la richiesta POST funziona solo se la provo da https://example.com, NON da https://www.example.com . Nel caso di quest'ultima mi mostra semplicemente una richiesta fallita. Nessuna risposta, niente

Ho cercato su Google e sembra essere correlato al CORS, ma non sono riuscito a risolvere il problema. Qualche idea?

È pubblicato 09/05/2020 alle 11:32
fonte dall'utente
In altre lingue...                            


2 risposte

voti
0

Prima di tutto vorrei sottolineare che le vostre Getrichieste funzionano perché appartengono alla categoria che non fa scattare una richiesta di pre-volo. Mentre la vostra Postrichiesta probabilmente utilizza un'intestazione che la rimuove dalla categoria e quindi richiede il passaggio del preflight. Se siete interessati a saperne di più, ecco il link alla documentazione.

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

Ora, secondo il vostro commento, l'errore che otterrete è

La risposta alla richiesta di preflight non supera il controllo di accesso: No L'intestazione "Access-Control-Allow-Origin" è presente sull'intestazione richiesta risorsa.

Il metodo che state usando per impostare le intestazioni, come avete detto in un commento, non funziona sulle richieste di riposo. Potete usare la funzione sottostante nel vostro file functions.phpo in un file plugin per impostare l'origine su *.

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

Sebbene io raccomando quello che WordPress fa di default. Se controllate wp-includes/rest-api.phptroverete la funzione originale che ho modificato per il vostro scopo. Se siete interessati a dare un'occhiata, ecco il link trac.

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

Risposto il 17/05/2020 a 10:38
fonte dall'utente

voti
0

Ho trovato il tuo problema che devi rimuovere dal tuo url wpe dovrebbe funzionare. Per esempio:

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

Dovrebbe funzionare:

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

Potete anche controllare questo tutorial. Spero che vi sia d'aiuto.

Risposto il 14/05/2020 a 09:23
fonte dall'utente

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