441

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 で監視すると、次のヘッダーが表示されます。

オプション xxxx/yyyy HTTP/1.1
Host: 127.0.0.1:6666
User-Agent: 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
Accept-Encoding: gzip, deflate
接続: keep -alive
Origin: null
Access-Control-Request-Method: POST
Access-Control-Request-Headers: my-first-header,my-second-header
プラグマ: no-cache
Cache-Control: no-cache

カスタム ヘッダーが に移動する理由Access-Control-Request-Headers:

Access-Control-Request-Headers: my-first-header,my-second-header

次のようなヘッダー値を期待していました。

My-First-Header: 最初の値
My-Second-Header: 2 番目の値

出来ますか？

4

8 に答える 8

465

jQuery Ajax 呼び出しでリクエスト ヘッダーを設定する方法の例を次に示します。

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json=" + escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result =" + StringifyPretty(msg));
  }
});
于 2012-11-22T15:02:59.283 に答える
197

以下のこのコードは私にとってはうまくいきます。私は常に一重引用符のみを使用していますが、問題なく動作します。一重引用符のみまたは二重引用符のみを使用することをお勧めしますが、混同しないでください。

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
  });
于 2014-11-14T12:45:18.660 に答える
140

Firefox で見たのは実際のリクエストではありません。HTTP メソッドは POST ではなく OPTIONS であることに注意してください。実際には、クロスドメイン AJAX リクエストを許可するかどうかを判断するためにブラウザーが行う「プリフライト」リクエストでした。

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

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

于 2012-09-10T03:44:33.670 に答える
3

そのため、JavaScript を使用してボットを作成することはできません。これは、オプションがブラウザーで許可されているものに制限されているためです。ほとんどのブラウザーが従うCORSポリシーに従うブラウザーを注文して、 ランダムな要求を他のオリジンに送信し、その応答を簡単に取得できるようにすることはできません!

さらに、ブラウザーに付属の開発者ツールなどから、一部の要求ヘッダーを手動で編集しようとするorigin-headerと、ブラウザーは編集を拒否し、プリフライトOPTIONS要求を送信する場合があります。

于 2016-05-03T10:31:52.123 に答える
-11

Rack-cors gemを使用してみてください。そして、Ajax 呼び出しにヘッダー フィールドを追加します。

于 2016-07-06T23:30:41.217 に答える