javascript - XMLHttpRequest 在 $.ajax 工作的地方给出 CORS 错误

标签 javascript jquery ajax xmlhttprequest

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.');
  }
});

但是 native 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 时,它会返回 406 Not Acceptable 错误。 但是当我想发送 JSON 时,它给出了 CORS 错误。 使用 native javascript 方法有什么我遗漏的吗?

最佳答案

您发送的 jQuery ajax 请求被认为是“简单”的,因此不太严格地遵循 SOP(它不发送 OPTIONS 请求。)您发送的 native javascript ajax 请求不被认为是“简单”的,因为您添加了Content-Type header 。

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

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

关于javascript - XMLHttpRequest 在 $.ajax 工作的地方给出 CORS 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29383684/

相关文章:

jquery - 如何使用 jQuery 获取不同的 ID?

javascript - Bootstrap Popover 焦点和键盘

javascript - Ajax 函数中的多个字段

javascript - 如何在 Ajax 上成功提交表单 :

javascript - 使用 ionic 框架的 $cordova ImagePicker 插件时出现错误

javascript - 表行的切换类

Javascript/HTML/CSS 命运之轮仅按差异旋转?

javascript - JQuery .html() 方法和外部脚本

javascript - 验证后指向第一个字段

在字符串中遇到换行符时,Javascript 在 Visual Force 页面上不起作用