[解決済み】AngularJS がクロスオリジンリソースに対して OPTIONS HTTP リクエストを実行する場合
質問
AngularJSをクロスオリジンリソースと通信するように設定しようとしています。テンプレートファイルを配信しているアセットホストは別のドメインにあり、したがってAngularが実行するXHRリクエストはクロスドメインでなければなりません。この作業を行うために、HTTPリクエストに適切なCORSヘッダーをサーバーに追加しましたが、うまくいかないようです。問題は、ブラウザ(クローム)でHTTPリクエストを検査すると、アセットファイルに送信されたリクエストがOPTIONSリクエストであることです(GETリクエストであるべきです)。
これはAngularJSのバグなのか、それとも何か設定が必要なのか、よくわかりません。私が理解したところでは、XHRラッパーはOPTIONS HTTPリクエストを行うことができないので、ブラウザはGETリクエストを実行する前に、最初にアセットをダウンロードすることが"allow"であるかどうかを判断しようとしているように見えます。この場合、CORSヘッダーを設定する必要があります(Access-Control-Allow-Origin: http://asset.host... .)もアセットホストと同じように設定するのですか?
解決方法は?
OPTIONSリクエストは決してAngularJSのバグではなく、Cross-Origin Resource Sharing標準がブラウザに命じている動作方法です。このドキュメントを参照してください。 https://developer.mozilla.org/en-US/docs/HTTP_access_control とあり、「概要」の項にこうあります。
Cross-Origin Resource Sharing規格は、新しいHTTP ヘッダを使用することで、サーバーは、そのヘッダを使用することができるオリジンのセットを記述することができます。 ウェブブラウザを使用してその情報を読み取ることが許可されています。さらに ユーザーデータに副作用を与える可能性のあるHTTPリクエストメソッド(特に 特に、GET以外のHTTPメソッドや、POSTを使用する場合。 特定のMIMEタイプ)。この仕様では、ブラウザに次のことを義務付けています。 リクエストのプリフライトを行い、サーバーからサポートされているメソッドを呼び出す。 をHTTP OPTIONSリクエストヘッダで送信し、その後、HTTP OPTIONSリクエストヘッダが承認された時点で サーバーは、実際のリクエストを実際のHTTPリクエスト メソッドを使用します。 また、サーバーはクライアントに対して、quot;credentials" (クッキーと HTTP 認証データを含む) を一緒に送信すべきかどうかをクライアントに通知することもできます。 リクエストに対応します。
すべてのWWWサーバーに対応する汎用的な解決策を提供することは非常に困難です。なぜなら、サーバー自体やサポートしようとするHTTP動詞によって設定が異なるからです。この素晴らしい記事( http://www.html5rocks.com/en/tutorials/cors/ には、サーバーが送信する必要のある正確なヘッダについて、より詳細な説明があります。
関連
-
[解決済み] Access-Control-Allow-Originヘッダーはどのように機能するのですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] ローカルファイルの読み込み時に "Cross origin requests are only supported for HTTP." というエラーが発生する。
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。
-
[解決済み] OPTIONSルートにCORSヘッダを追加しても、ブラウザが私のAPIにアクセスできないのはなぜですか?
-
[解決済み] プリフライト要求に対する応答がアクセス制御チェックを通過しない
-
[解決済み] file:// URLから実行されるアプリケーションのリクエストで、"Origin null is not allowed by Access-Control-Allow-Origin" エラーが発生する。
-
[解決済み】Cross-Origin Request Headers(CORS)とPHPヘッダとの関係
-
[解決済み】CORS(cross-origin resource sharing)投稿リクエストを動作させる方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】typeerrorは、未定義のプロパティ'data'を読み取ることができません。
-
[解決済み] AngularJSで$httpリクエスト中にスピナーGIFを表示する?
-
[解決済み] data-ng-file-selectが動作しないのはなぜですか?
-
[解決済み] 'ApplicationSignInManager' が見つからない(ASP.NET MVC)
-
[解決済み] md-selectでデフォルト値を設定する方法
-
[解決済み] controllerAs "プロパティを使用する理由は何ですか?
-
angularjsのルーティングについて $stateと$stateParamsの話
-
[解決済み] angularJSの::の意味するところ
-
[解決済み] Angular JSによるシンプルなポップアップ
-
[解決済み] angular.serviceとangular.factoryの比較