Problems with Xmlhttprequest in Chrome

Question

After this update of Google Chrome to version 53, I am facing problems in calls Ajax (jQuery), $.http (Angularjs) and Xmlhttprequest (Javascript) presenting the following message:

XMLHttpRequest cannot load *. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '*' is therefore not allowed access. The response had HTTP status code 400.

In a similar call from another service, with the same characteristics, I received the following message:

XMLHttpRequest cannot load *. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '*' is therefore not allowed access. The response had HTTP status code 405.

An example call is the following:

var data = JSON.stringify(false);

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("PUT", "*");
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("accept", "application/json");

xhr.send(data);

I also can’t run in Firefox and Internet Explorer, but it used to work in Chrome, when making calls in Postman or Backend method they run correctly.

I am facing this problem because I am implementing one of the api’s in a Landing page without backend, so I need to use only call Javascript or jQuery the page.

Someone can help me?

Answer 1

That:

 xhr.open("PUT", "*");

It makes no sense, the second parameter in the open must be a URL or relative path, * does not look like a "validate URL".

See this part of the error message:

The Response had HTTP status code 405.

Code 405 indicates no permitted method, which refers to the use of PUT, GET, etc, but in your case it’s probably the URL you used as an asterisk *.

Probably what you want is something like:

 xhr.open("PUT", "/foo/bar");

The problem of No 'Access-Control-Allow-Origin' header is present on the requested resource. has been mentioned several times on the site:

Research: /search?q=No+Access-Control-Allow-Origin

The url you are trying to access is external or a sub-domain, to allow this type of request (from different domains).