[解決済み] CORSとAccess-Control-Allow-Headersはどのように機能するのですか?
質問
domain.com から a.domain.com に CORS リクエスト POST を作成しようとしています。
私のjavascriptは次のようなものです。
$('#fileupload').fileupload({
xhrFields: {
withCredentials: true
},
dataType: 'json',
url: $('#fileupload').data('path'),
singleFileUploads: true,
add: function(e, data){
data.submit();
}
});
最初、OPTIONSルートがこのように呼ばれているのが見えます。
Request URL: https://a.domain.com/some/route
Request Method:OPTIONS
Status Code:200 OK
オプションのリクエストです。
Access-Control-Request-Headers:origin, content-type, accept
Access-Control-Request-Method:POST
Host:a.domain.com
Origin:http://domain.com:3000
Referer:http://domain.com:3000/home
オプションレスポンス
Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:POST
Access-Control-Allow-Origin:http://domain.com:3000
Connection:keep-alive
Content-Length:0
Content-Type:text/html;charset=utf-8
そのリクエストは、前述のように200で戻ってきます。私のサーバーでは、同じルートに
POST
メソッドの後に返されるのは、このようなものです。
OPTIONS
Request URL:https://a.domain.com/some/route
POST REQUEST
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryjwr5Pk7WBcfzMdbO
Origin:http://domain.com:3000
Referer:http://domain.com:3000/home
と、その
POST
のリクエストはキャンセルされ、失敗します。
質問ですが、POSTコントローラにもaccess-control-allow-originを設定する必要があるのでしょうか?
私は、認証用のクッキーでドメインが
.domain.com
このクッキーは、リクエストの中で一度だけ送信されましたが、今は送信されていません。なぜこのようなことが起こるのか、何か心当たりはありますか?
どうすればいいですか?
はい、ヘッダーが必要です。
Access-Control-Allow-Origin: http://domain.com:3000
または
Access-Control-Allow-Origin: *
を OPTIONS レスポンスと POST レスポンスの両方で使用します。ヘッダを含める必要があります。
Access-Control-Allow-Credentials: true
をPOSTレスポンスに追加することもできます。
OPTIONSレスポンスには、ヘッダも含める必要があります。
Access-Control-Allow-Headers: origin, content-type, accept
をリクエストされたヘッダーと一致させる。
関連
-
Vueでルートネスティングを実装する例
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
[解決済み] Access-Control-Allow-Originヘッダーはどのように機能するのですか?
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] Access-Control-Allow-Origin複数オリジンのドメイン?
-
[解決済み] OPTIONSルートにCORSヘッダを追加しても、ブラウザが私のAPIにアクセスできないのはなぜですか?
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
vueのグローバルがscss(mixin)を導入。
-
Vueでルートネスティングを実装する例
-
vueにおけるfilterの適用シーンについて解説します。
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?