La solicitud POST de la API personalizada de WordPress falla en React

votos
4

Tengo un backend de WordPress donde he añadido mis propios endpoints personalizados a la 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' ),
    )
);

He configurado mi entorno así: https://example.com es donde vive la aplicación React, y WordPress está en un subdirectorio, en https://example.com/wp

Mi aplicación React hace peticiones POST y GET a los puntos finales de arriba. Tengo una variable de entorno de producción donde configuro la URL base de la API, que es (https://example.com/wp/wp-json/game'juego' es mi espacio de nombres) y así puedo hacer peticiones con Axios a https://example.com/wp/wp-json/game/countriesy https://example.com/wp/wp-json/game/check_answeraquí viene el problema.

Mi servidor está configurado para que sirva a la aplicación React tanto con como sin www. Así que https://example.com y https://www.example.com sirven la misma aplicación.

Pero esto genera un asunto interesante para mis puntos finales personalizados: la petición GET siempre funciona. pero la petición POST sólo funciona si lo intento desde https://example.com, NO desde https://www.example.com . En el caso de esta última, simplemente me muestra una solicitud fallida. No hay respuesta, nada

Lo he buscado en Google y parece estar relacionado con el CORS, pero no he podido arreglarlo. ¿Alguna idea?

Publicado el 09/05/2020 a las 11:32
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

En primer lugar me gustaría señalar que sus Getsolicitudes funcionan porque pertenecen a la categoría que no desencadena una solicitud de pre-vuelo. Aunque su Postsolicitud probablemente esté usando algún encabezado que la elimine de la categoría y por lo tanto requiera de un vuelo previo para pasar. Si está interesado en leer más, aquí está el enlace de documentación.

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

Ahora, de acuerdo con su comentario, el error que está obteniendo es

La respuesta a la solicitud de pre-vuelo no pasa el control de acceso: No El encabezado "Acceso-Control-Autorización de Origen" está presente en el solicitado recurso.

El método que está utilizando para establecer los encabezados, como mencionó en un comentario, no funciona en las solicitudes de descanso. Puedes usar la función de abajo en tu functions.phpo un archivo de plugin para establecer el origen en *.

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

Aunque recomiendo lo que hace WordPress de forma predeterminada. Si lo wp-includes/rest-api.phpcompruebas encontrarás la función original que he modificado para tu propósito. Si estás interesado en echar un vistazo, aquí está el enlace trac.

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

Respondida el 17/05/2020 a las 10:38
fuente por usuario

votos
0

Encontré tu problema que necesitas quitar de tu url wpy debería funcionar. Por ejemplo:

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

Debería funcionar:

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

También puedes consultar este tutorial. Espero que te ayude.

Respondida el 14/05/2020 a las 09:23
fuente por usuario

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