CODEWITHSUNDEEP
javascriptjqueryajaxxmlhttprequest
Ronak Bhandari
Ronak Bhandari

Reputation: 332

XMLHttpRequest gives CORS error where as $.ajax works

The jquery ajax code works absolutely fine

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

But native javascript XMLHttpRequest throws a CORS error.

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));

When i set the Content-Type as x-www-form-urlencoded, it is able to send the request as a stringified JSON. When i don't set any header, it returns a 406 Not Acceptable error. But when i want to send JSON, it gives CORS error. Is there anything what i am missing using the native javascript approach?

Upvotes: 0

Views: 1696

Answers (3)

Kevin B
Kevin B

Reputation: 95062

the jQuery ajax request you are sending is considered "simple" and therefore follows the SOP less strictly (it doesn't send an OPTIONS request.) The native javascript ajax request you are sending is not considered "simple" because you added the Content-Type header.

To fix this, you'll of course need to remove the content-type header, and then since you are no longer setting the content-type header to application/json, you'll have to format your data to be a valid paramstring. With jquery it's as simple as $.param(xyz), however, I'm assuming you're trying to do this without jQuery, so you'll need your data formatted as 

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

Upvotes: 3

Ronak Bhandari
Ronak Bhandari

Reputation: 332

We have our server in ruby. So we added the default format in our ruby code

default_format: json

The final JS code is 

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));

Upvotes: 0

Gilead Silvanas
Gilead Silvanas

Reputation: 97

CORS error happens when javascript tries to access an address outside its domain. I'm not familiar with jQuery to know why it is able to get thru compared to native ajax. Anyway, you can simply allow CORS in the http server config of the domain you are accessing (if that's possible).

Simply add this in the apache2.conf or httpd.conf in case of apache

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

You can also create a .htaccess file to do that, in this case uncomment the AllowOverride All above and comment the rest.

hope this helps!

Upvotes: 0

Related Questions