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

ローカルホスト CORS ヘッダーの問題

適切な CORS ヘッダーを使用してサーバーを構成しているにもかかわらず、クライアント スクリプトでローカルホストをオリジンとして使用する際に問題が発生する.

サーバー構成

サーバーは次のヘッダーで設定されます:

Access-Control-Allow-Origin:http://localhost

クライアント スクリプト

クライアント スクリプトは XMLHttpRequest オブジェクトを使用しますにリクエストをする'http://stackoverflow.com/'.

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

Error

しかし、リクエストは次のエラーで失敗します:

XMLHttpRequest cannot load http://stackoverflow.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

解決策

サーバー構成は正しいように見えますが、問題は、クライアント スクリプトのオリジンとして「localhost」を使用していることにあります。

2014 年に「WontFix」とマークされたバグのため、Chrome は CORS リクエストの localhost をサポートしていません。

回避策

この問題を回避するには、次のように解決されるドメインを使用してください。 127.0.0.1 (「localho.st」など)、またはテスト目的で「--disable-web-security」フラグを使用して Chrome を起動します。

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