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.

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

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

Comments

[gtsioni]

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!

[gtsioni]

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

[Peter Tirrell]

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

[zolfaghari]

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

[lolero]

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/WebExtensio‌​ns/…

[Steven Zhou]

Why would that help?

[Gene Z. Ragan]

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.

[RainCast]

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