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

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 发送。当我不设置任何 header 时，它 returns 一个 406 Not Acceptable 错误。但是当我想发送 JSON 时，它给出了 CORS 错误。使用本机 javascript 方法有什么我遗漏的吗？

Answer 1

当 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 2

我们的服务器在 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));

Answer 3

您发送的 jQuery ajax 请求被认为是 "simple"，因此不那么严格地遵循 SOP（它不发送 OPTIONS 请求。）原生 javascript ajax 您发送的请求不被视为 "simple" 因为您添加了 Content-Type header.

要解决此问题，您当然需要删除 content-type header，然后由于您不再将 content-type header 设置为 application/json，您必须将数据格式化为有效的参数字符串。使用 jquery 就像 $.param(xyz) 一样简单，但是，我假设您尝试在没有 jQuery 的情况下执行此操作，因此您需要将数据格式化为

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

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

XMLHttpRequest gives CORS error where as $.ajax works

javascript

ajax

jquery

xmlhttprequest