[解決済み] アクセスコントロールリクエストヘッダは、jQueryでAJAXリクエストのヘッダに追加されます。
質問
jQueryからのAJAX POSTリクエストにカスタムヘッダーを追加したいのですが、どうすればいいですか?
こんなことをやってみました。
$.ajax({
type: 'POST',
url: url,
headers: {
"My-First-Header":"first value",
"My-Second-Header":"second value"
}
//OR
//beforeSend: function(xhr) {
// xhr.setRequestHeader("My-First-Header", "first value");
// xhr.setRequestHeader("My-Second-Header", "second value");
//}
}).done(function(data) {
alert(data);
});
このリクエストを送信して、FireBugで見ると、このようなヘッダが表示されます。
OPTIONS xxxx/yyyy HTTP/1.1
ホスト: 127.0.0.1:6666
ユーザーエージェント Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9, / ;q=0.8
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
エンコーディング:gzip, deflate
接続:キープアライブ
オリジン:ヌル
Access-Control-Request-Method: POST
Access-Control-Request-Headers: my-first-header,my-second-header
プラグマ:ノーキャッシュ
キャッシュ制御: no-cache
なぜカスタムヘッダーは
Access-Control-Request-Headers
:
Access-Control-Request-Headers: my-first-header,my-second-header
こんな感じのヘッダー値を期待していました。
My-First-Header: 最初の値
My-Second-Header:2番目の値
可能でしょうか?
どのように解決するのですか?
Firefox で見たものは、実際のリクエストではありません。HTTP メソッドは POST ではなく OPTIONS であることに注意してください。 これは、クロスドメイン AJAX リクエストが許可されるべきかどうかを判断するためにブラウザが行う「プリフライト」リクエストでした。
プリフライトリクエストのAccess-Control-Request-Headersヘッダーは、実際のリクエストのヘッダーリストを含んでいます。 そしてサーバーは、ブラウザが実際のリクエストを送信する前に、これらのヘッダがこのコンテキストでサポートされているかどうかを報告することが期待されます。
関連
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] cURL呼び出しによるHTTPリクエストを使用してヘッダーを送信する方法は?
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] FirefoxでjQuery $.ajax(), $.post がREQUEST_METHODとして "OPTIONS "を送信する問題
最新
-
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+ElementUIによる大規模なフォームの処理例
-
jQueryのコピーオブジェクトの説明
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
JavaScriptのStringに関する共通メソッド
-
[解決済み] Ajaxリクエストです。安全でないヘッダの設定を拒否されました
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] jsまたはjQueryでajaxリクエストにカスタムHTTPヘッダを追加するにはどうすればよいですか?