Why does my XMLHttpRequest have readystate 4 but status 0?

Question

I have a content script in my Chrome extension which runs on some HTTPS page. It is trying to send a POST request to an HTTP page (by means of a background script) which is a route for an API that I have set up. I am trying to send JSON data over. However I am getting status 0, even though the ready state is 4. I used Postman to perform the same post and it worked. This leads me to believe it is a HTTPS protocol issue, however I am performing a GET on an HTTP page in the same background script and that is working fine. What might be the issue then? Here is my POST code:

var string = json;
xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4 && xhr.status == 200) {
        var json = JSON.parse(xhr.responseText);
    }
};
xhr.send(string);

Thanks!

UPDATE:

I used the chrome developer tools to debug the background script and I found the error, which was "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.". I guess background script errors do not print to the main console.

UPDATE:

I had to add the site I was posting to to the permissions field in my manifest. It works now.

Earthman

There is no such thing like 0 status code.Please refer developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes – Ferret

Regardless, when I enter the onreadystatechange function and check xhr.status, it is 0. – Earthman

A status of 0 usually means the request was aborted, either intentionally or due to interruption (e.g. navigation causing the page to be unloaded). The request is as "complete" as it's going to be (so, readyState === 4), but no response was ever received to set a different status. – Canthus

@Earthman Updated my answer. If you want to discuss other ways for debugging the AJAX error, we can chat sometime. – Eosin

I have also seen this in response to an OPTIONS call, the ajax layer reports status 0 but Fiddler is shows a 500 (and raw response shows 500) with a valid html body describing the error. – Unguinous

Answer 1

I have a similar issue and, after debugging it for days, the only solution I found was to make the XMLHttpRequest synchronous by setting set the async param in the XMLHttpRequest open method to false.

Supernova

Why would that help? – Mcgee

This solved my problem when trying to use WKWebView with XMLHttpRequest to download a blob url. I tried setting various access headers to no avail, but this worked. – Noman

Solved my problem, too. My code worked fine on Chromium. But Safari always reported status 0 after the POST Request, messing up my error handling. Firefox didn't even succeed in fulfilling that REST POST at all. Thanks for the tip. – Spume

That fixed the problem for me as well, but unfortunately synchronous XMLHttpRequests are now deprecated, according to MDN: developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/… – Tuesday

Answer 2

The readyState value of 4 means the operation completed successfully or failed. The status property is initialized to 0 and will remain at 0 if an error occurs. Assign an event handler to the xhr.onerror property and I bet you'll see that handler fire. Unfortunately, the error event doesn't give any useful information about what caused the error.

To find out what caused the error, I would use the debug tools found in Chrome. Menu => More tools => Developer Tools. Then go to the "Network" tab. There you can see all the HTTP requests your webpage has made. It will show better details on any errors there.

Eosin

I am kind of inexperienced at this, and I'm having a hard time interpreting the page you linked me. What might a working error handler look like? Thanks! – Earthman

I was able to set up an onerror function handler and the event.detail is undefined. – Earthman

Is there no way to get error details from the error object or xhr object itself? Is browser debug tools really the only way? – Rousing

As Jon Anderson told , I see Network tab but nothing to tell more than debugging mode just say "error" – Aldercy

For my case, the error happens on a remote server, I would like to see the actual error information, what should I do? Thx. – Teofilateosinte

Answer 3

What did you do?

I had to add the site I was posting to the permissions field in my manifest. It works now.

XMLHttpRequest.setRequestHeader("Access-Control-Allow-Origin", "the api website"); ?               

Gambado

I think he meant adding it to the manifest.json that goes in the header of the html -> developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/… – Supernova

Answer 4

In mky case I got the status 0', becvause I used a javascript onClickButton() function on a form, so two gets!

Imminent