我想添加一个自定义头的AJAX POST请求从jQuery。

我试过了:

$.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,我看到这个头:

OPTIONS 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+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: my-first-header my-second-header

我期待的头值是这样的:

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

这可能吗?


当前回答

试着使用rack-cors宝石。并在Ajax调用中添加报头字段。

其他回答

这就是为什么不能用JavaScript创建机器人的原因,因为您的选项受限于浏览器允许您执行的操作。您不能只是命令一个遵循CORS策略的浏览器(大多数浏览器都遵循CORS策略)向其他源发送随机请求,并允许您简单地获得响应!

此外,如果你试图手动编辑一些请求头,比如浏览器自带的开发者工具中的origin-header,浏览器会拒绝你的编辑,并可能会发送一个preflight OPTIONS请求。

你在Firefox中看到的并不是实际的请求;注意HTTP方法是OPTIONS,而不是POST。它实际上是浏览器做出的“pre-flight”请求,以确定是否应该允许跨域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));
  }
});

尝试添加'Content-Type':'application/json':

 $.ajax({
        type: 'POST',
        url: url,
        headers: {
            'Content-Type':'application/json'
        }
        //OR
        //beforeSend: function(xhr) {
        //  xhr.setRequestHeader("My-First-Header", "first value");
        //  xhr.setRequestHeader("My-Second-Header", "second value");
        //}
    }).done(function(data) {
        alert(data);
    });

试着使用rack-cors宝石。并在Ajax调用中添加报头字段。