2012-04-10 44 views
270

我想将自定义标头添加到来自jQuery的AJAX POST请求中。使用jQuery在AJAX请求中添加标头

我已经试过这样:

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

当我发出这个请求,我看有萤火,我看到这个标题:

OPTIONS 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
Accept:text/html,application/xhtml + xml,application/xml; q = 0.9,/; Q = 0.8
接受语言:FR,FR-FR; Q = 0.8,EN-US; Q = 0.5,连接; Q = 0.3
接受编码:gzip,放气
连接:保持-alive
来源:空
访问控制请求-方法:POST
访问控制请求报头:我先头,我-第二头
杂注:无缓存
Cache-Control:no-cache

为什么我的自定义页眉去Access-Control-Request-Headers

访问控制请求报头:我先头,我-第二头

我期待这样的标头值:

我入先部首:第一值
我的 - 第二报头:第二值

可能吗?

+2

可能的重复[如何添加一个自定义的HTTP头到js或jQuery的ajax请求?](http://stackoverflow.com/questions/7686827/how-can-i-add-a-custom-http -jader-to-ajax-request-with-js-or-jquery) – Prestaul 2013-10-23 18:45:34

回答

97

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

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

在飞行前的访问控制请求,头头请求包含实际请求中的标题列表。然后希望服务器在浏览器提交实际请求之前报告在这种情况下是否支持这些头文件。

+8

谢谢,从前端角度来看这真的很难看。 – antpaw 2015-03-05 15:18:41

329

下面是一个例子,如何设置请求头中的一个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)); 
    } 
}); 
+9

thx,我知道用自定义标题发送Ajax请求。我的问题是与不同的域..我所有的自定义头被放入访问控制请求头。它只是浏览器中的安全性:跨域。 – fingerup 2012-11-23 17:36:24

+0

是的,在浏览器中跨域请求会造成一些困难。你总是可以使用一些代理脚本来发送你的跨域请求 – milkovsky 2012-11-25 13:14:00

+1

RequestHeader在Firefox中工作? – kk1076 2013-02-22 05:40:31

81

下面这段代码对我的作品。我总是只使用单个括号,并且它工作正常。我建议你应该只使用单个括号或只使用双括号,但不要混淆在一起。

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

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

+1

thx,我知道发送Ajax请求与自定义标题。我的问题是与不同的域..我所有的自定义头被放入访问控制请求头。它只是浏览器中的安全性:跨域。 – fingerup 2014-11-14 13:53:12

+0

谢谢,我偶然设置了标题:“授权:基本XXXXXX”,iOS 9/Safari 9在项目中引发了SyntaxError DOM 12。 – Mark 2015-10-01 15:00:58

+3

你是指双引号还是单引号?我不认为任何人会使用双括号。 – DBS 2016-06-01 08:47:09

0

这就是为什么你不能用Javascript创建一个bot,因为你的选择仅限于浏览器允许你做的事情。您不能仅仅订购遵循大多数浏览器遵循的CORS策略的浏览器,将随机请求发送到其他来源,并让您获得简单的响应!

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

-10

尝试使用rack-cors宝石。并在您的ajax调用中添加标题字段。