[解決済み] CORS - httpリクエストの「プリフライト」はどうやるの?
質問
私は (私が所有している) 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/
関連
-
[解決済み] Access-Control-Allow-Originヘッダーはどのように機能するのですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。
-
[解決済み] プリフライト要求に対する応答がアクセス制御チェックを通過しない
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】プリフライトCORSリクエストの導入の動機は何ですか?
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jsまたはjQueryでajaxリクエストにカスタムHTTPヘッダを追加するにはどうすればよいですか?
-
[解決済み] javascriptで2つの数値を連結する方法は?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?