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

2020/09/28 14:21 · javascript ·  · 0评论

我想向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


接受: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


来源:null


访问控制请求方法:POST

访问控制请求头:my-first-header,my-second-header

语法:no-cache


缓存控制:no-cache

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

访问控制请求标头:我的第一个标头,我的第二个标头

我期待这样的标头值:

My-First-Header:第一个值

My-Second-Header:第二个值

可能吗?

您在Firefox中看到的不是实际的请求;请注意,HTTP方法是OPTIONS,而不是POST。浏览器实际上是“飞行前”请求,以确定是否应允许跨域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提取(此处

这是在nginx(nginx.conf文件)打开CORS的示例配置

这是一个在Apache上打开CORS的示例配置(.htaccess文件)

这就是为什么您无法使用JavaScript创建漫游器的原因,因为您的选择仅限于浏览器允许您执行的操作。您不能仅仅订购遵循大多数浏览器遵循CORS策略的浏览器, 就将随机请求发送到其他来源,并让您获得简单的响应!

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

尝试使用齿条心形宝石。并在您的Ajax调用中添加标题字段。

本文地址:http://javascript.askforanswer.com/shiyongjqueryjiangfangwenkongzhiqingqiubiaotoutianjiadaoajaxqingqiudebiaotouzhong.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!