突然、Webアプリで何も変更せずに、Chromeで開くときにCORSエラーが表示されるようになりました。 Access-Control-Allow-Origin: *
ヘッダーを追加してみました。それから私はこのエラーを受け取ります:
XMLHttpRequest cannot load http://localhost:9091/sockjs-node/info?t= 1449187563637. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3010' is therefore not allowed access.
しかし、次の画像でわかるように、Access-Control-Allow-Credentials
ヘッダーはありません。
WTF? Chromeバグ?
私のページはhttp://localhost:3010
にロードされ、そのサーバーもAccess-Control-Allow-Origin: *
を問題なく使用します。 2つのエンドポイントの両方がそれを使用する場合、問題はありますか?
「資格情報フラグ」は、XMLHttpRequest.withCredentials
ヘッダーではなく、リクエストのAccess-Control-Allow-Credentials
を指します。それが私の混乱の原因でした。
リクエストのwithCredentials
がtrue
の場合、Access-Control-Allow-Origin: *
ヘッダーがなくても、Access-Control-Allow-Credentials
は使用できません。
withCredentials:true
で構成されたサーバー上のAccess-Control-Allow-Origin: *
リクエストを使用できますが、サーバーでさらに追加の設定が必要:
サーバーでAccess-Control-Allow-Origin=*
を使用すると、xhr CORS要求で(資格情報を必要とする)リソースへのアクセスが許可されません。
回避策:
xhr.withCredentials = false
を使用します)Access-Control-Allow-Origin=*
を要求のオリジンに変更します。また、リクエストが特定のポートを使用している場合や、ホワイトリストに登録されたドメインのリストからのものである場合など、特定の基準でこの書き換えを適用することもできます。IISサーバー でこれを行う方法を説明する記事ですが、他の多くのサーバーでこれを行うことができます。
PS:資格情報を使用する場合、サーバーの応答に次のヘッダーも必要になります:Access-Control-Allow-Credentials=true
PS2:「access-control-allow-Origin」パラメーターに許可される値は1つだけです。たとえば、domain1.com domain2.comという2つのドメインを使用しようとすると、機能しません。
同じ問題を解決しましたこれらの手順を使用して..
1)chrome拡張機能「Allow-Control-Allow-Origin」を無効にします
2)これらをサービスに追加します
var xhr = new(); xhr.withCredentials = true;