CORS POST 请求可以使用纯 JavaScript，但为什么不使用 jQuery?

2022-01-15 00:00:00 cors xmlhttprequest jquery javascript

我正在尝试发出跨域发布请求，并且我得到了它在普通 JavaScript 中的工作，如下所示:

I'm trying to make a Cross Origin post request, and I got it working in plain JavaScript like this:

var request = new XMLHttpRequest();
var params = "action=something";
request.open('POST', url, true);
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");};
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);

但我想使用 jQuery，但我无法让它工作.这就是我正在尝试的:

But I would like to use jQuery, but I can't get it to work. This is what I'm trying:

$.ajax(url, {
    type:"POST",
    dataType:"json",
    data:{action:"something"}, 
    success:function(data, textStatus, jqXHR) {alert("success");},
    error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});

这会导致失败.如果有人知道为什么 jQuery 不起作用，请告诉我们.谢谢.

This results in Failure. If anyone knows why jQuery doesn't work, please let us all know. Thanks.

(我正在使用 jQuery 1.5.1 和 Firefox 4.0，我的服务器正在响应正确的 Access-Control-Allow-Origin 标头)

(I'm using jQuery 1.5.1, and Firefox 4.0, and my server is responding with a proper Access-Control-Allow-Origin header)

推荐答案

更新:正如 TimK 所指出的，jquery 1.5.2 不再需要这样做.但如果您想添加自定义标头或允许使用凭据(用户名、密码或 cookie 等)，请继续阅读.

UPDATE: As TimK pointed out, this isn't needed with jquery 1.5.2 any more. But if you want to add custom headers or allow the use of credentials (username, password, or cookies, etc), read on.

我想我找到了答案！(4 小时和之后的大量诅咒)

I think I found the answer! (4 hours and a lot of cursing later)

//This does not work!!
Access-Control-Allow-Headers: *

您需要手动指定您将接受的所有标头(至少在 FF 4.0 和 Chrome 10.0.648.204 中对我来说是这种情况).

You need to manually specify all the headers you will accept (at least that was the case for me in FF 4.0 & Chrome 10.0.648.204).

jQuery 的 $.ajax 方法为所有跨域请求发送x-requested-with"标头(我认为它唯一的跨域请求).

jQuery's $.ajax method sends the "x-requested-with" header for all cross domain requests (i think its only cross domain).

所以响应 OPTIONS 请求所需的缺失标头是:

So the missing header needed to respond to the OPTIONS request is:

//no longer needed as of jquery 1.5.2
Access-Control-Allow-Headers: x-requested-with

如果您传递任何非简单"标题，您需要将它们包含在您的列表中(我再发送一个):

If you are passing any non "simple" headers, you will need to include them in your list (i send one more):

//only need part of this for my custom header
Access-Control-Allow-Headers: x-requested-with, x-requested-by

总而言之，这是我的 PHP:

So to put it all together, here is my PHP:

// * wont work in FF w/ Allow-Credentials
//if you dont need Allow-Credentials, * seems to work
header('Access-Control-Allow-Origin: http://www.example.com');
//if you need cookies or login etc
header('Access-Control-Allow-Credentials: true');
if ($this->getRequestMethod() == 'OPTIONS')
{
  header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
  header('Access-Control-Max-Age: 604800');
  //if you need special headers
  header('Access-Control-Allow-Headers: x-requested-with');
  exit(0);
}

相关文章