访问控制请求标头，使用 jQuery 添加到 AJAX 请求的标头中

IT技术 javascript jquery ajax post http-headers
2021-01-11 10:54:45

我想向来自 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+ 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
来源：null
访问控制请求方法：POST
访问控制请求头：my-first-header,my-second-header
Pragma：no-cache
Cache-Control：no-cache

为什么我的自定义标题转到Access-Control-Request-Headers：

访问控制请求标头：我的第一个标头，我的第二个标头

我期待这样的标题值：

My-First-Header：第一个值
My-Second-Header：第二个值

是否可以？

6个回答

以下是如何在 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));
  }
});
是的，在浏览器中跨域请求可能会导致一些困难。你总是可以使用一些代理脚本来发送你的跨域请求
2021-03-14 10:54:45
如何使用 API KEY 添加标头？
2021-03-26 10:54:45
@Si8 请查看这篇文章stackoverflow.com/questions/5517281/...
2021-03-28 10:54:45
谢谢，我知道发送带有自定义标头的 Ajax 请求。我的问题是不同的域。我所有的自定义标头都放入 Access-Control-Request-Headers 中。这只是浏览器中的安全性：跨域。
2021-03-31 10:54:45

下面的代码对我有用。我总是只使用单引号，而且效果很好。我建议你应该只使用单引号或双引号，但不要混淆。

$.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 及以上版本的 X-CSRF-TOKEN
2021-03-16 10:54:45
双引号或单引号（不是“括号”）在这里无关。
2021-03-18 10:54:45
谢谢，我不小心设置了标题：“授权：基本 XXXXXX”，而 iOS 9 / Safari 9 在一个项目上抛出了 SyntaxError DOM 12。
2021-03-24 10:54:45
谢谢，我知道发送带有自定义标头的 Ajax 请求。我的问题是不同的域。我所有的自定义标头都放入 Access-Control-Request-Headers 中。这只是浏览器中的安全性：跨域。
2021-03-26 10:54:45
你是说双引号还是单引号？我认为没有人会使用双括号。
2021-03-27 10:54:45

您在 Firefox 中看到的不是实际请求；请注意，HTTP 方法是 OPTIONS，而不是 POST。它实际上是浏览器发出的“飞行前”请求，以确定是否应该允许跨域 AJAX 请求：

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

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

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

在此处输入图片说明

如果您在服务器上打开 CORS，那么您的代码将起作用。您也可以使用 JavaScript 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 上打开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"

这就是为什么您不能使用 JavaScript 创建机器人的原因，因为您的选择仅限于浏览器允许您执行的操作。您不能只订购遵循大多数浏览器遵循的 CORS策略的浏览器来向其他来源发送随机请求并允许您简单地获得响应！

此外，如果您尝试手动编辑某些请求标头，例如origin-header使用浏览器附带的开发人员工具，浏览器将拒绝您的编辑并可能发送预检OPTIONS请求。

其它你可能感兴趣的问题
上一篇多次触发 jQuery 单击事件 下一篇var self = 这个？