1. ホーム
  2. javascript

[解決済み] アクセスコントロールリクエストヘッダは、jQueryでAJAXリクエストのヘッダに追加されます。

2022-03-23 13:55:50

質問

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 リクエストが許可されるべきかどうかを判断するためにブラウザが行う「プリフライト」リクエストでした。

http://www.w3.org/TR/cors/

プリフライトリクエストのAccess-Control-Request-Headersヘッダーは、実際のリクエストのヘッダーリストを含んでいます。 そしてサーバーは、ブラウザが実際のリクエストを送信する前に、これらのヘッダがこのコンテキストでサポートされているかどうかを報告することが期待されます。