web-dev-qa-db-ja.com

にヘッダーを追加 AJAX jQueryでリクエストする

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
ホスト：127.0.0.1:6666
User-Agent：Mozilla/5.0（Windows NT 6.1; WOW64; rv：11.0）Gecko/20100101 Firefox/11.0
受け入れます：text/html、application/xhtml + xml、application/xml; q = 0.9、 / ; q = 0.8
受理言語：fr、fr-fr; q = 0.8、en-us; q = 0.5、en; q = 0.3
Accept-Encoding：gzip、deflate
つながり：キープアライブ
由来：null
アクセス制御要求方法：POST
アクセス制御要求ヘッダー：my-first-header、my-second-header
プラグマ：キャッシュなし
キャッシュ制御：キャッシュなし

なぜ私のカスタムヘッダはAccess-Control-Request-Headersに行くのですか？

アクセス制御要求ヘッダー：my-first-header、my-second-header

私はこのようなヘッダ値を期待していました：

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

出来ますか？

javascriptjqueryajaxposthttp-headers
346
fingerup

あなたがFirefoxで見たものは実際の要求ではありませんでした。 HTTPメソッドはPOSTではなくOPTIONSです。実際には、クロスドメインAJAX要求を許可するかどうかをブラウザが判断するための「飛行前」の要求でした。

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

飛行前のリクエストのAccess-Control-Request-Headersヘッダーには、実際のリクエストのヘッダーのリストが含まれています。ブラウザは実際のリクエストを送信する前に、これらのヘッダがこのコンテキストでサポートされているかどうかをレポートします。

121
karlgold

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));
  }
});
397
milkovsky

以下のこのコードは私のために働きます。私はいつも一重引用符だけを使います、そしてそれはうまく働きます。一重引用符OR二重引用符のみを使用し、混同しないでください。

$.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);
    }
  });

これであなたの質問に答えることができます...

138
G-raph

そしてそれが、Javascriptでボットを作成できない理由です。あなたのオプションはブラウザがあなたにできることに制限されているからです。ほとんどのブラウザが従うCORSポリシーに従うブラウザを注文して、他の起源にランダムな要求を送信し、単純にその応答を受け取ることを許可することはできません。

さらに、ブラウザ付属の開発者ツールからOrigin-headerのようにリクエストヘッダを手動で編集しようとした場合、ブラウザは編集を拒否し、プリフライトOPTIONSリクエストを送信する可能性があります。

1
the accountant

カスタムヘッダを送信するのでCORSリクエストは NOT SIMPLE REQUEST つまりブラウザは最初にprefilight OPTIONSリクエストを送信し、そのサーバがリクエストを許可するかどうかを確認します。

enter image description here

サーバーのCORSをオンにすると、コードは機能します。代わりにjs fetchを使うこともできます（ here ）

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=My-First-Header,My-Second-Header';


$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "My-First-Header":"first value",
        "My-Second-Header":"second value"
    }
}).done(function(data) { 
    alert(data[0].request.httpMethod + ' was send - open chrome console> network to see it');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

これはCORS on nginx（nginx.confファイル）を有効にする設定例です。

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_Origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_Origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

これはApache上のCORS（.htaccessファイル）をオンにする設定例です。

# ------------------------------------------------------------------------------
# | Cross-domain AJAX requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-Origin AJAX requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

#Header set Access-Control-Allow-Origin "http://example.com:3000"
#Header always set Access-Control-Allow-Credentials "true"

Header set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"
0
Kamil Kiełczewski