Falha na solicitação de ponto final de API personalizada do WordPress POST em Reagir

votos
4

Eu tenho um backend WordPress onde eu adicionei meus próprios endpoints personalizados à 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' ),
    )
);

Eu criei meu ambiente assim: https://example.com é onde vive a aplicação React, e WordPress está em um subdiretório, em https://example.com/wp

A minha aplicação React faz pedidos POST e GET para os pontos finais acima. Eu tenho uma variável de ambiente de produção onde eu defino a URL base da API, que é (https://example.com/wp/wp-json/game'game' é meu namespace) e assim eu posso fazer requisições com Axios para https://example.com/wp/wp-json/game/countriese https://example.com/wp/wp-json/game/check_answere aqui vem o problema.

O meu servidor está configurado de forma a servir a aplicação React tanto com como sem www. Portanto https://example.com e https://www.example.com servem ambos a mesma aplicação.

Mas isto gera um problema interessante para os meus pontos finais personalizados: o pedido de GET sempre funciona. mas a solicitação POST só funciona se eu estiver tentando a partir de https://example.com, NÃO a partir de https://www.example.com . No caso deste último, ele simplesmente me mostra uma requisição falhada. Sem resposta, nada

Eu pesquisei no Google e parece estar relacionado com CORS, mas não consegui corrigi-lo. Alguma idéia aqui?

Publicado 09/05/2020 em 11:32
fonte usuário
Em outras línguas...                            


2 respostas

votos
0

Antes de mais, gostaria de salientar que os seus Getpedidos funcionam porque pertencem à categoria que não desencadeia um pedido de pré-vôo. Enquanto o seu Postpedido provavelmente está usando algum cabeçalho que o remove da categoria, exigindo assim que o pré-vôo passe. Se você estiver interessado em ler mais, aqui está o link da documentação.

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

Agora, de acordo com seu comentário, o erro que você está recebendo é

A resposta ao pedido de pré-voo não passa na verificação de controle de acesso: Não O cabeçalho 'Access-Control-Allow-Origin' está presente no cabeçalho solicitado recurso.

O método que você está usando para definir cabeçalhos, como você mencionou em um comentário, não funciona em pedidos de descanso. Você pode usar a função abaixo no seu arquivo functions.phpou em um arquivo plugin para definir a origem para *.

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

Embora eu recomende o que o WordPress faz por padrão. Se você verificarwp-includes/rest-api.php, você encontrará a função original que eu modifiquei para o seu propósito. Se você estiver interessado em dar uma olhada, aqui está o link trac.

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

Respondeu 17/05/2020 em 10:38
fonte usuário

votos
0

Encontrei o teu problema que precisas de remover da tua url wpe deve funcionar. Por exemplo, o seu problema deve funcionar:

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

Deveria ser:

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

Você também pode verificar este tutorial. Espero que te ajude.

Respondeu 14/05/2020 em 09:23
fonte usuário

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