ヘッダー構成が正しいにもかかわらず、ローカルホストの CORS リクエストが失敗するのはなぜですか?

localhost での CORS オリジンの問題のトラブルシューティング

Nginx/Node.js サーバーで適切なヘッダーを設定して CORS を有効にしても、次のような問題が発生しますlocalhost から別のオリジンにリクエストを行うとエラーが発生します。エラー メッセージは、http://localhost に設定された Access-Control-Allow-Origin ヘッダーが拒否されていることを示しています。

Chrome の制限

問題は Chrome にあります自体。 Chrome は、CORS リクエストの許可された送信元として localhost をサポートしていません。この動作は、2014 年に WontFix とマークされた長年のバグが原因です。

回避策

• 別のドメインを使用してください: http://localhost の代わりに、同じ IP アドレスに解決される localho.st のようなドメインを使用します。 (127.0.0.1).
• Web セキュリティを無効にする: テスト目的で、--disable-web-security フラグを指定して Chrome を起動することで、Chrome の Web セキュリティ機能を一時的に無効にすることができます。

追加考慮事項

• クライアント スクリプトで正しいオリジンにアクセスしていることを確認してください。
• リクエストをブロックして、ブラウザの「同一オリジン ポリシー」が干渉していないか確認してください。 .
• 問題が解決しない場合は、サーバーのログを確認するか、ネットワーク デバッグ ツールを使用して追加の問題を特定することを検討してください。エラーまたは不一致。

以上がヘッダー構成が正しいにもかかわらず、ローカルホストの CORS リクエストが失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。