首页 文章

CORS POST请求可以使用普通的javascript，但为什么不使用jQuery？

提问于
浏览 次
76

我正在尝试制作一个Cross Origin帖子请求，并且我使用这样的普通Javascript工作：

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，但我无法让它工作 . 这就是我正在尝试的：

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

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

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

javascript jquery xmlhttprequest cors

3 回答

  • 16

    更新：正如TimK指出的那样，jquery 1.5.2不再需要这个 . 但是，如果您想添加自定义标头或允许使用凭据（用户名，密码或cookie等），请继续阅读 .

    我想我找到了答案！ （4小时后诅咒很多）

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

    您需要手动指定您将接受的所有 Headers （至少在FF 4.0和Chrome 10.0.648.204中就是这种情况） .

    jQuery的$ .ajax方法为所有跨域请求发送“x-requested-with”标头（我认为它是唯一的跨域） .

    因此，响应OPTIONS请求所需的缺少标头是：

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

    如果您传递任何非“简单” Headers ，则需要将它们包含在列表中（我再发送一个）：

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

    所以把它们放在一起，这是我的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);
}
    回复于
  • 8

    另一种可能性是设置 dataType: json 会导致JQuery发送 Content-Type: application/json 标头 . 这被CORS视为非标准头，并且需要CORS预检请求 . 所以要尝试一些事情：

    1）尝试配置服务器以发送正确的预检响应 . 这将采用其他 Headers 的形式，如 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers .

    2）删除 dataType: json 设置 . JQuery默认情况下应该请求 Content-Type: application/x-www-form-urlencoded ，但为了确保，你可以用 contentType: 'application/x-www-form-urlencoded' 替换 dataType: json

    回复于
  • 65

    您正在js中发送"params"： request.send(params);

    但在jquery中"data"“ . 是否定义了数据？： data:data,

    此外，您在网址中有错误：

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

    您正在将语法与$ .post的语法混合

    Update ：我根据monsur回答谷歌搜索，我发现你需要添加 Access-Control-Allow-Headers: Content-Type （以下是完整段落）

    http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/

    CORS如何工作CORS的工作方式与Flash的crossdomain.xml文件非常相似 . 基本上，浏览器将向服务发送跨域请求，将HTTP头Origin设置为请求服务器 . 该服务包括一些 Headers ，如Access-Control-Allow-Origin，用于指示是否允许此类请求 . 对于BOSH连接管理器，通过将Access-Control-Allow-Origin的值设置为*，足以指定允许所有原点 . Content-Type标头还必须在Access-Control-Allow-Headers标头中列入白名单 . 最后，对于某些类型的请求，包括BOSH连接管理器请求，将预先进行权限检查 . 浏览器将执行OPTIONS请求并期望返回一些HTTP标头，这些标头指示允许哪些来源，允许哪些方法以及此授权将持续多长时间 . 例如，以下是我为OPTIONS返回的旁遮普和ejabberd补丁：Access-Control-Allow-Origin：*
    访问控制允许方法：GET，POST，OPTIONS
    Access-Control-Allow-Headers：Content-Type
    Access-Control-Max-Age：86400

    回复于

相关问题