web-dev-qa-db-ja.com

WordPressカスタムAPIエンドポイントPOSTリクエストが失敗するReact

WordPressバックエンドがあり、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' ),
    )
);
_

私は次のように環境をセットアップしました： https://example.com はReactアプリケーションが存在する場所であり、WordPress https://example.com/wp のサブディレクトリにあります

私のReactアプリケーションがPOSTおよびGETリクエストを上記のエンドポイントに送信します。APIのベースURLを設定する本番環境変数があります。_https://example.com/wp/wp-json/game_（ 'game'は私の名前空間）なので、Axiosを使用して_https://example.com/wp/wp-json/game/countries_および_https://example.com/wp/wp-json/game/check_answer_にリクエストを送信でき、問題が発生します。

私のサーバーは、React wwwの有無にかかわらずアプリケーションを提供するように構成されています。したがって、 https://example.com および https://www.example.com どちらも同じアプリケーションを提供します。

しかし、これにより、カスタムエンドポイントに興味深い問題が発生します。GETリクエストは常に機能します。 POSTリクエストは https://example.com から試行した場合にのみ機能し、 https：//www.example。 com 。後者の場合、それは単に失敗したリクエストを表示するだけです。

私はグーグルしました、それはCORSに関連しているようですが、それを修正することができませんでした。ここに何かアイデアはありますか？

phpreactjswordpresscorswordpress-rest-api
5
Danny Hobo

まず、プリフライトリクエストをトリガーしないカテゴリに属しているため、Getリクエストが機能することを指摘しておきます。あなたのPostリクエストはおそらくカテゴリからそれを削除するいくつかのヘッダーを使用しているため、プリフライトを渡す必要があります。もっと読みたくなったら、ここにドキュメントリンクがあります。

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

今、あなたのコメントによると、あなたが得ているエラーは

プリフライト要求への応答がアクセス制御チェックに合格しません：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。

ヘッダーの設定に使用している方法は、コメントで述べたように、残りのリクエストでは機能しません。 functions.phpまたはプラグインファイルで以下の関数を使用して、Originを*に設定できます。

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

WordPressがデフォルトで行うことをお勧めします。wp-includes/rest-api.phpをチェックすると、目的に合わせて変更した元の関数が見つかります。調べてみたい場合は、こちらtracリンクです。

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

1
shazyriver