アクセス制御要求ヘッダーは、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で監視すると、次のヘッダーが表示されます。

オプション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
Accept-Encoding：gzip、deflate
Connection：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番目の値

出来ますか？

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

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

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

以下は、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));
  }
});

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

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

カスタムヘッダーを送信するため、CORSリクエストは単純なリクエストではないため、ブラウザは最初にプリフライトOPTIONSリクエストを送信して、サーバーがリクエストを許可していることを確認します。

サーバーでCORSをオンにすると、コードは機能します。代わりにJavaScriptフェッチを使用することもできます（ここ）

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>

nginx（nginx.confファイル）でCORSをオンにする設定例は次のとおりです。

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（.htaccessファイル）でCORSを有効にする設定例を以下に示します。

# ------------------------------------------------------------------------------
# | 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"

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

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

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