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

本文翻译自：Add header in AJAX request with jQuery

I would like to add a custom header to an AJAX POST request from jQuery. 我想向jQuery的AJAX POST请求添加自定义标头。

I have tried this: 我已经试过了：

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

When I send this request and I watch with FireBug, I see this header: 当我发送此请求并观看FireBug时，看到以下标头：

OPTIONS xxxx/yyyy HTTP/1.1 选项xxxx / yyyy HTTP / 1.1
Host: 127.0.0.1:6666 主持人：127.0.0.1：6666
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0 用户代理：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 接受：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 接受语言：fr，fr-fr; q = 0.8，en-us; q = 0.5，en; q = 0.3
Accept-Encoding: gzip, deflate 接受编码：gzip，放气
Connection: keep-alive 连接：保持活动状态
Origin: null 来源：null
Access-Control-Request-Method: POST 访问控制请求方法：POST
Access-Control-Request-Headers: my-first-header,my-second-header 访问控制请求标头：我的第一标头，我的第二标头
Pragma: no-cache 语法：无缓存
Cache-Control: no-cache 缓存控制：无缓存

Why do my custom headers go to Access-Control-Request-Headers : 为什么我的自定义标头转到Access-Control-Request-Headers ：

Access-Control-Request-Headers: my-first-header,my-second-header 访问控制请求标头：我的第一标头，我的第二标头

I was expecting a header values like this: 我期待这样的标头值：

My-First-Header: first value My-First-Header：第一个值
My-Second-Header: second value 我的第二标题：第二个值

Is it possible? 可能吗？

#1楼

参考：https://stackoom.com/question/gLfB/使用jQuery在AJAX请求中添加标头

#2楼

What you saw in Firefox was not the actual request; 您在Firefox中看到的不是实际的请求； note that the HTTP method is OPTIONS, not POST. 请注意，HTTP方法是OPTIONS，而不是POST。 It was actually the 'pre-flight' request that the browser makes to determine whether a cross-domain AJAX request should be allowed: 实际上，这是浏览器发出的“飞行前”请求，以确定是否应允许跨域AJAX请求：

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

The Access-Control-Request-Headers header in the pre-flight request includes the list of headers in the actual request. 飞行前请求中的Access-Control-Request-Headers标头包括实际请求中的标头列表。 The server is then expected to report back whether these headers are supported in this context or not, before the browser submits the actual request. 然后，在浏览器提交实际请求之前，服务器将在此上下文中报告是否支持这些标头。

#3楼

Here is an example how to set a Request Header in a JQuery Ajax Call: 这是一个如何在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));}
});

#4楼

This code below works for me. 下面的代码对我有用。 I always use only single quotes, and it works fine. 我总是只使用单引号，并且效果很好。 I suggest you should use only single quotes OR only double quotes, but not mixed up. 我建议您仅使用单引号或仅使用双引号，但不要混用。

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

Hope this answers your question... 希望这能回答您的问题...

#5楼

And that is why you can't create a bot with Javascript, because your options are limited to what the browser allows you to do. 这就是为什么您不能使用Javascript创建机器人的原因，因为您的选择仅限于浏览器允许执行的操作。 You can't just order a browser that follows the CORS policy, which most browsers follow, to send random requests to other origins and allow you to get the response that simply! 您不能仅订购遵循大多数浏览器遵循的CORS策略的浏览器， CORS随机请求发送到其他来源，并让您获得简单的响应！

Additionally, if you tried to edit some request headers manually like origin-header from the developers tools that come with the browsers, the browser will refuse your edit, and may send a preflight OPTIONS request. 此外，如果您尝试手动编辑一些请求标头，例如来自浏览器随附的开发人员工具中的origin-header ，则浏览器将拒绝您的编辑，并可能发送预检OPTIONS请求。

#6楼

Try to use rack-cors gem. 尝试使用齿条心形宝石。 And add the header field in your ajax call. 并在您的ajax调用中添加标头字段。

使用jQuery在AJAX请求中添加标头相关推荐

vue.js与ajax删除,javascript - VueJs和VueResource，从Ajax请求中删除标头字段 - 堆栈内存溢出...
当实例化Vuejs (2.2.6)和Vue-resource (1.2.1)时 ,我使用以下代码设置标头授权,通过这种方式,我可以将所有请求授权给我的API: Vue.http.headers.com ...
ajax中dom,在（jQuery）ajax请求中获取当前脚本DOM对象
涉及两个步骤简单的解决方案: 1)找出哪些元素脚本标签是 2)发现,元素的代码中的前一个兄弟: var scripts = document.getElementsByTagName("s ...
ajax get怎么传参数值,如何使用jQuery在GET请求中传递参数
我应该如何在jQuery Ajax请求中传递查询字符串值?我目前按照以下方式执行它们,但我确信有一种更简洁的方法,不需要我手动编码. $.ajax({ url: "ajax.aspx?aja ...
ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
ajax on ture,Ajax请求中的async:false/true(同步/异步)的作用
async. 默认是true,即为异步方式,$.Ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.Ajax里的success方法,这时候执行的是两个线程.若要将其设置为fa ...
ajax返回的图片数据格式,jquery发送ajax请求返回数据格式
jquery向服务器发送一个ajax请求后,可以返回多种类型的数据格式,包括:html,xml,json,text等. 1.html格式的数据 " "+username+" ...
jQuery 发送 AJAX 请求
AJAX 请求状态 xhr.readyState 可以用来查看请求当前的状态参考官方文档的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/XM ...
ajax配套字符串,在ajax请求中填充数据字符串
我有一个表单可以有不同数量的文本字段(包含转换值).他们的名字是例如:"textfield_eng","textfield_ger","textfie ...
ajax请求数据用于另一个ajax,在另一个AJAX请求中使用数据
我正在学习ruby,但是我正需要一些JS/JQuery来处理一个我正在和朋友一起工作的小项目.我们正在使用Last.fm API,并试图构建一个页面,我们将从两个不同的URL调用Json数据.在另一个 ...

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

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

使用jQuery在AJAX请求中添加标头相关推荐

最新文章

热门文章