javascript - CORS プリフライトは Access-Control-Allow-Origin:* で戻ってきます:*、ブラウザはまだリクエストに失敗します

Question

AJAXGETをトリガーhttp://qualifiedlocalhost:8888/resource.jsonして、予想される CORS プリフライトを開始します。これは、正しく返されるように見えます。

フライト前の`OPTIONS`リクエスト

Request URL:http://qualifiedlocalhost:8888/resource.json
Request Method:OPTIONS
Status Code:200 OK

リクエストヘッダー

Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, origin, x-requested-with
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:qualifiedlocalhost:8888
Origin:http://localhost:9000
Pragma:no-cache
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36

応答ヘッダー

Access-Control-Allow-Headers:Content-Type, X-Requested-With
Access-Control-Allow-Methods:GET,PUT,POST,DELETE
Access-Control-Allow-Origin:*
Connection:keep-alive
Content-Length:2
Content-Type:text/plain
Date:Thu, 01 Aug 2013 19:57:43 GMT
Set-Cookie:connect.sid=s%3AEpPytDm3Dk3H9V4J9y6_y-Nq.Rs572s475TpGhCP%2FK%2B2maKV6zYD%2FUg425zPDKHwoQ6s; Path=/; HttpOnly
X-Powered-By:Express

格好いい？

それでうまくいくはずですよね？

ただし、後続のリクエストは引き続きエラーで失敗しますXMLHttpRequest cannot load http://qualifiedlocalhost:8888/resource.json. Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin.

本当のお願い

Request URL:http://qualifiedlocalhost:8888/resource.json

リクエストヘッダー

Accept:application/json, text/plain, */*
Cache-Control:no-cache
Origin:http://localhost:9000
Pragma:no-cache
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36
X-Requested-With:XMLHttpRequest

ヘルプ！

目の前をじっと見つめているのかもしれません。しかし、何かアイデアはありますか？関連する場合に備えて...私はAngularJSを使用$resourceしてCompoundJSサーバーと通信しています。

score 14 · Accepted Answer

Access-Control-Allow-Methods: 'GET, POST' を 'GET, POST, PUT, DELETE' に変更します。

前：

   app.use(function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
        next();
    });

後：

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
    next();
});

score 9 · Accepted Answer

私は最近同じ問題を抱えていました。問題は、プリフライト応答と実際の応答の両方Access-Control-Allow-Originでヘッダー (および使用する場合はAccess-Control-Allow-Credentialsヘッダー) を送信する必要があることです。

あなたの例では、プリフライト応答にのみ含まれています。

score 6 · Accepted Answer

Web サーバー/get 関数には、HTTP ヘッダーの Access-Control-Allow-Origin も含まれていますか? 最終的に、AngularJS 1.0.7 とリモート Java サーブレットを使用して、その追加に成功しました。これが私の Java コードスニペットです。AngularJS クライアントでは変更は必要ありませんでした。

サーブレット:

@Override
protected void doOptions(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // Send Response
    super.doOptions(request,  response);
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, X-Requested-With");
}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    /* ... */
    response.setHeader("Access-Control-Allow-Origin", "*");
}

より洗練された代替手段は、サーブレットフィルターです。

score 4 · Accepted Answer

サーバーが正しい CORS ヘッダーを送信しているのに、CORS の要件が満たされていないと見なされるため、ブラウザーが失敗するという同じ問題に気付いています。さらに興味深いことに、私たちの場合、同じブラウザーセッションの一部の AJAX 呼び出しでのみ発生し、すべてではありません。

作業理論...

ブラウザのキャッシュをクリアすると、この問題は解決します。現在の私の理論では、これはクロスオリジンサーバーによって設定されている Cookie に関係しているというものです。あなたのシナリオでは、飛行前の OPTIONS リクエストへの応答の一部として Cookie が設定されていることに気付きました。そのサーバーが別のオリジンからのリクエストに対して Cookie を設定しないようにしてみましたか?

ただし、場合によっては、ブラウザをリセットした後に問題が再発することがわかっています。また、ブラウザーをプライベートモードで実行すると、問題が解消され、ブラウザーのキャッシュにあるものに関係する問題が指摘されます。

参考までに、これが私のシナリオです（これをSOの新しい質問としてほとんど投稿しましたが、代わりにここに入れました）：

jQuery.ajax を介して行われた CORS GET リクエストの一部が失敗するというバグに遭遇しました。特定のブラウザセッションで、プリフライト OPTIONS リクエストが通過し、その後に実際のリクエストが続くことがわかります。同じセッションで、一部のリクエストは成功し、他のリクエストは失敗します。

ブラウザのネットワークコンソールでの要求と応答のシーケンスは次のようになります。

最初の OPTIONS プリフライトリクエスト

OPTIONS /api/v1/users/337/statuses
HTTP/1.1 Host: api.obfuscatedserver.com 
Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: http://10.10.8.84:3003 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
Access-Control-Request-Headers: accept, origin, x-csrf-token, auth 
Accept: */* Referer: http://10.10.8.84:3003/ 
Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8

次のような応答を取得します。

HTTP/1.1 200 OK 
Date: Tue, 06 Aug 2013 19:18:22 GMT 
Server: Apache/2.2.22 (Ubuntu) 
Access-Control-Allow-Origin: http://10.10.8.84:3003 
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT 
Access-Control-Max-Age: 1728000 
Access-Control-Allow-Credentials: true 
Access-Control-Allow-Headers: accept, origin, x-csrf-token, auth 
X-UA-Compatible: IE=Edge,chrome=1 
Cache-Control: no-cache 
X-Request-Id: 4429c4ea9ce12b6dcf364ac7f159c13c 
X-Runtime: 0.001344 
X-Rack-Cache: invalidate, pass 
X-Powered-By: Phusion 
Passenger 4.0.2 
Status: 200 OK 
Vary: Accept-Encoding
Content-Encoding: gzip

次に、実際の GET リクエスト、

GET https://api.obfuscatedserver.com/api/v1/users/337
HTTP/1.1 
Accept: application/json, text/javascript, */*; q=0.01 
Referer: http://10.10.8.84:3003/ 
Origin: http://10.10.8.84:3003 
X-CSRF-Token: xxxxxxx 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 
auth: xxxxxxxxx

ブラウザコンソールに次のようなエラーが表示されます。

XMLHttpRequest
  cannot load https://api.obfuscatedserver.com/api/v1/users/337.
  Origin http://10.10.8.84:3003 is not allowed by Access-Control-Allow-Origin.

追加のデバッグ

curl を介して同じシーケンスを再生でき、サーバーからの有効な応答が表示されます。つまり、要求を通過させる必要がある期待される CORS ヘッダーがあります。

プライベート/シークレットブラウザーウィンドウで同じシナリオを実行しても、問題は再現されませんでした。これにより、キャッシュをクリアしようとするようになり、問題も解消されました。しかし、しばらくすると元に戻りました。

この問題は、OSX デスクトップの Chrome だけでなく、iPhone サファリでも再現されていました。

本当に助けが必要なこと

クロスオリジンドメインに設定されたいくつかの Cookie がここに関与しており、ブラウザのバグを公開している可能性があると思われます。これをさらにデバッグするために、ブラウザ (ネイティブスタック?) に設定できるツールまたはブレークポイントはありますか? CORS ポリシーを評価するコード内のブレークポイントが理想的です。

score 0 · Accepted Answer

「オプション」に対するあなたの反応はうまくいっているようです。問題は「get」応答にあるようです。

「get」応答が「options」応答と同じ CORS ヘッダーを返すようにする必要があります。

特に、'get' 応答には以下を含める必要があります。

Access-Control-Allow-Headers:Content-Type, X-Requested-With
Access-Control-Allow-Methods:GET,PUT,POST,DELETE
Access-Control-Allow-Origin:*

javascript - CORS プリフライトは Access-Control-Allow-Origin:* で戻ってきます:*、ブラウザはまだリクエストに失敗します

フライト前のOPTIONSリクエスト

格好いい？

本当のお願い

ヘルプ！

5 に答える 5

作業理論...

Related

Reference

フライト前の`OPTIONS`リクエスト