1. ホーム
  2. javascript

[解決済み] CORS - httpリクエストの「プリフライト」はどうやるの?

2022-11-05 12:06:42

質問

私は (私が所有している) WCF サービスにクロスドメイン HTTP リクエストを作成しようとしています。私は、クロスドメイン スクリプトの制限を操作するためのいくつかのテクニックを読みました。私のサービスは GET と POST の両方のリクエストに対応しなければならないため、GET リクエストの URL を src とする動的なスクリプト タグを実装することができません。サーバーで自由に変更できるので、サーバーのレスポンスに "Access-Control-Allow-Origin" ヘッダーを含めるように設定し、OPTIONS リクエストで 'preflight' リクエストする回避策を実装しようとし始めました。私はこの投稿からアイデアを得ました。 CORS を動作させる

サーバー側では、私の Web メソッドは、HTTP レスポンスに 'Access-Control-Allow-Origin: *を HTTP 応答に追加しています。現在、応答にこのヘッダーが含まれていることが確認できます。私の質問は、どのようにリクエスト(OPTIONS)を「プリフライト」するのでしょうか?私はjQuery.getJSONを使用してGETリクエストを行っていますが、ブラウザは悪名高いものですぐにリクエストをキャンセルします。

オリジン http://localhost は Access-Control-Allow-Origin で許可されていません。

この CORS 技術に詳しい方はいらっしゃいますか?私のリクエストをプリフライトするために、クライアントでどのような変更を行う必要がありますか?

ありがとうございます。

どのように解決するのですか?

プリフライトリクエストの際に、以下の2つのヘッダが表示されます。Access-Control-Request-Method と Access-Control-Request-Headers です。これらのリクエストヘッダは、実際のリクエストを行うための許可をサーバーに求めています。プリフライトレスポンスでは、実際のリクエストを動作させるために、これらのヘッダを承認する必要があります。

例えば、ブラウザが以下のヘッダを持つリクエストを行ったとします。

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/