REST API からデータをフェッチする際の「'Access-Control-Allow-Origin' ヘッダーがありません」エラーを解決する方法は?

REST API からデータを取得中に「要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません」

からデータを取得しようとしたときローカルホストでの作業中に REST API を実行すると、「Fetch API を読み込めません。プリフライト要求への応答がアクセス制御をパスしません」というエラー メッセージが表示される場合があります。チェック: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。」このエラーは、ブラウザが適用する「同一オリジン ポリシー」によって発生し、異なるオリジン (ドメイン、ポート、プロトコル) からのリソースが相互にやり取りすることを制限します。

エラーの克服

CORS プロキシ

REST API をホストしているサーバーを制御できず、その応答に関する唯一の問題は、必須の Access-Control-Allow-Origin ヘッダーを使用すると、CORS プロキシを利用してリクエストを容易にすることができます。

独自のプロキシを設定する手順は次のとおりです。

1. リポジトリのクローンを作成します。 git clone https://github.com/Rob--W/cors-anywhere.git
2. に移動しますクローンディレクトリ: cd cors-anywhere/
3. 依存関係のインストール: npm install
4. Heraku インスタンスの作成: heroku create
5. プロキシのデプロイ: git Push heroku master

デプロイしたら、REST API URL に生成されたプロキシをプレフィックスとして付けますURL。例: https://cryptic-headland-94862.herokuapp.com/https://example.com.

CORS プリフライトの回避

質問内のリクエストにより、期限切れのプリフライト リクエストがトリガーされますAuthorization ヘッダーを含めます。このプリフライトを防ぐには、次のいずれかの手法を使用することを検討してください。

• 最初のリクエストから Authorization ヘッダーを省略します。
• 認証データを埋め込むなど、別の認証メカニズムを利用します。リクエスト本文またはクエリ パラメータ。
• Content-Type を持つ POST リクエストを受け入れるようにサーバーを変更します。 JSON 形式のパラメーターを含む application/x-www-form-urlencoded body。

「Access-Control-Allow-Origin ヘッダーをワイルドカードにすることはできません」の解決

リクエストの場合認証情報が関係する場合、Access-Control-Allow-Origin ヘッダーの値が次の場合、ブラウザーはフロントエンド JavaScript コードによる応答へのアクセスを制限します。 「*」。このような場合、値はフロントエンド コードのオリジン (例: http://127.0.0.1:3000) と正確に一致する必要があります。

注: Chrome CORS プラグインの使用は避けてください。これらは単に汎用の Access-Control-Allow-Origin: * ヘッダーを応答に挿入するだけであり、予期しない動作を引き起こす可能性があります。信頼性の高いテストを行うには、curl コマンドに -H フラグを付けて使用します。

以上がREST API からデータをフェッチする際の「'Access-Control-Allow-Origin' ヘッダーがありません」エラーを解決する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。