CORS-httpリクエストを「プリフライト」する方法

私が所有しているWCFサービスにクロスドメインHTTPリクエストを送信しようとしています。クロスドメインスクリプティングの制限を操作するためのいくつかのテクニックを読みました。サービスはGETリクエストとPOSTリクエストの両方に対応する必要があるため、srcがGETリクエストのURLである動的スクリプトタグを実装できません。私はサーバーで自由に変更を加えることができるので、「Access-Control-Allow-Origin」ヘッダーと「プリフライト」リクエストとOPTIONSリクエストを含めるようにサーバー応答を構成することを含む回避策を実装しようとし始めました。この投稿からアイデアを得ました：CORSを機能させる

サーバー側で、私のWebメソッドはHTTP応答に「Access-Control-Allow-Origin：*」を追加しています。応答にこのヘッダーが含まれていることがわかります。私の質問は、リクエストを「プリフライト」するにはどうすればよいですか（オプション）？jQuery.getJSONを使用してGETリクエストを作成していますが、ブラウザは悪名高いリクエストをすぐにキャンセルします。

Origin http：// localhostはAccess-Control-Allow-Originでは許可されていません

このCORSテクニックを知っている人はいますか？リクエストをプリフライトするには、クライアントでどのような変更を行う必要がありますか？

ありがとう！

— ニック
ソース

回答:

158

プリフライトリクエスト中に、Access-Control-Request-MethodおよびAccess-Control-Request-Headersという2つのヘッダーが表示されます。これらのリクエストヘッダーは、実際のリクエストを行うための権限をサーバーに要求しています。実際のリクエストが機能するためには、プリフライトレスポンスでこれらのヘッダーを確認する必要があります。

たとえば、ブラウザが次のヘッダーを使用してリクエストを行うとします。

Origin: http://yourdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

サーバーは次のヘッダーで応答します。

Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header

Access-Control-Allow-Headers応答ヘッダーに特に注意してください。このヘッダーの値は、Access-Control-Request-Headersリクエストヘッダーのヘッダーと同じにする必要があり、「*」にすることはできません。

この応答をプリフライトリクエストに送信すると、ブラウザが実際のリクエストを行います。CORSの詳細については、http：//www.html5rocks.com/en/tutorials/cors/をご覧ください。

— Monsur
ソース

Access-Control-Allow-Originに複数のドメインを追加できますか？

— ボットボット

@botbotあなたはおそらくこれまでにこれを解決しましたが、他の人ができると思っている場合のためにAccess-Control-Allow-Origin: *

— スティーブ・チェンバーズ

私は何かを逃したかもしれません。では、2つのXMLHttpリクエストを送信する必要がありますか？プリフライト用。成功時の応答を確認してから、実際のクエリを送信しますか？

— カンカン2014年

@Kangkanプリフライトリクエストの送信について心配する必要はありません。リクエストにプリフライトが必要な場合、ブラウザがリクエストを送信します。

— monsur 2014年

「特別な注意を払う」ビットをありがとうございました... node / expressjsで私の問題を解決しましたこれらのプリフライト要求をキャッチするフィルターを追加できました

//cors and preflight filtering     app.all('*', function(req, res, next){..     //preflight needs to return exact request-header     res.set('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);     if ('OPTIONS' == req.method) return res.send(204);next();     });

— Kurtfm

このスレッドは2014年にさかのぼりますが、問題は私たちの多くにとってまだ最新のものである可能性があります。ここでは、jQuery 1.12 / PHP 5.6のコンテキストでそれを処理する方法を示します。

jQueryは、限られたヘッダーのみを使用してXHRリクエストを送信しました。「オリジン」のみが送信されました。
プリフライトリクエストは必要ありませんでした。
サーバーはこのようなリクエストを検出し、「Access-Control-Allow-Origin：」を追加するだけで済みました。$ _SERVER ['HTTP_ORIGIN']ヘッダー、これがクロスオリジンXHRであることを検出した後。

PHPコードサンプル：

if (!empty($_SERVER['HTTP_ORIGIN'])) {
    // Uh oh, this XHR comes from outer space...
    // Use this opportunity to filter out referers that shouldn't be allowed to see this request
    if (!preg_match('@\.partner\.domain\.net$@'))
        die("End of the road if you're not my business partner.");

    // otherwise oblige
    header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
}
else {
    // local request, no need to send a specific header for CORS
}

特に、exit;プリフライトは不要なので、追加しないでください。

— ファビアン・ハダディ
ソース