使用jQuery在AJAX请求中添加标头

Question

我想从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
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
Pragma: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:第二个值

可能吗？

Answer 1

以下是如何在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));
  }
});

Answer 2

以下代码适用于我.我总是只使用单引号,它工作正常.我建议你应该只使用单引号或仅使用双引号,但不能混淆.

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

希望这能回答你的问题......

Laravel 5.6+的更新:

在最新版本的Laravel中(至少来自Laravel 5.6及以上版本),它不是X_CSRF_TOKEN而是X-CSRF-TOKEN.

希望这澄清一下.

Answer 3

你在Firefox中看到的不是实际的要求; 请注意,HTTP方法是OPTIONS,而不是POST.这实际上是浏览器确定是否应允许跨域AJAX请求的"飞行前"请求:

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

飞行前请求中的Access-Control-Request-Headers标头包括实际请求中的标头列表.然后,在浏览器提交实际请求之前,服务器将报告是否在此上下文中支持这些标头.

Answer 4

由于您发送自定义标头，因此您的CORS请求不是简单的请求，因此浏览器首先发送prefilight OPTIONS请求，以检查服务器是否允许您的请求。

如果您在服务器上打开CORS，则您的代码将可用。您也可以使用js fetch代替（此处）

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"