Question

jquery ajax代码工作正常

  $.ajax({
  url: rumi_api_endpoint + rumi_params + "filter/show",
  data: {"name":"ronak","country":"india"}, //return  data
  dataType: 'json',
  type: 'POST',
  async: true,
  success: function (res) {
    onComplete(res);
  },
  error: function () {
    console.log('Save error.');
  }
});

但原生javascript XMLHttpRequest会抛出CORS错误。

if (window.XMLHttpRequest) {
  xmlhttp=new XMLHttpRequest();
} else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    onComplete(res);
  }
}
xmlhttp.open("POST",rumi_api_endpoint + rumi_params + "filter/show",true);
xmlhttp.setRequestHeader("Content-Type","application/json; charset=UTF-8");
var xyz = {
  "config": {"name":"ronak","country":"india"},
  "token": "abc"
}
xmlhttp.send(JSON.stringify(xyz));

当我将Content-Type设置为x-www-form-urlencoded时，它能够将请求作为字符串化的JSON发送。当我没有设置任何标题时，它返回406 Not Acceptable错误。但是当我想发送JSON时，它会给出CORS错误。使用原生javascript方法有什么我缺少的东西吗？

Answer 1

您发送的jQuery ajax请求被认为是“简单”，因此不太严格遵循SOP（它不发送OPTIONS请求。）您发送的本机javascript ajax请求不被视为“简单”，因为您添加了Content-Type标题。

要解决此问题，您当然需要删除内容类型标头，然后由于您不再将内容类型标头设置为application/json，您必须将数据格式化为是一个有效的准绳。使用jquery它就像$.param(xyz)一样简单，但是，我假设你在没有jQuery的情况下尝试这样做，所以你需要将你的数据格式化为

config%5Bname%5D=ronak&config%5Bcountry%5D=india&token=abc

Answer 2

当javascript尝试访问其域外的地址时，会发生CORS错误。我不熟悉jQuery，知道为什么它能够通过本机ajax获得通过。无论如何，您只需在您正在访问的域的http服务器配置中允许CORS（如果可能的话）。

如果是apache

，只需在apache2.conf或httpd.conf中添加

<Directory /var/www>
#AllowOverride All
Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Credentials: "true"
Header add Access-Control-Allow-Methods "GET, POST, OPTIONS"
</Directory>

您还可以创建.htaccess文件来执行此操作，在这种情况下，取消注释上面的AllowOverride All并对其余内容进行评论。

希望这有帮助！

Answer 3

我们的服务器在ruby中。所以我们在ruby代码中添加了默认格式

default_format: json

最终的JS代码是

if (window.XMLHttpRequest) {
  xmlhttp=new XMLHttpRequest();
} else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    onComplete(JSON.parse(xmlhttp.response));
  }
}
xmlhttp.open("POST",rumi_api_endpoint + rumi_params + "filter/show",true);
var xyz = {
  "config": {"name":"ronak","country":"india"},
  "token": "abc"
}
xmlhttp.send(JSON.stringify(xyz));

XMLHttpRequest在$ .ajax工作时给出了CORS错误

3 个答案: