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.

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.

• javascript
• post
• google-chrome-extension
• xmlhttprequest

• There is no such thing like 0 status code.Please refer developer.mozilla/en-US/docs/Web/HTTP/Response_codes – paraS elixiR Commented Apr 5, 2016 at 3:17
• 5 Regardless, when I enter the onreadystatechange function and check xhr.status, it is 0. – gtsioni Commented Apr 5, 2016 at 3:19
• 4 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 "plete" as it's going to be (so, readyState === 4), but no response was ever received to set a different status. – Jonathan Lonowski Commented Apr 5, 2016 at 3:29
• @gtsioni Updated my answer. If you want to discuss other ways for debugging the AJAX error, we can chat sometime. – Jon Anderson Commented Apr 5, 2016 at 18:54
• 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. – crokusek Commented Nov 6, 2017 at 19:31

4 Answers 4

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.

The readyState value of 4 means the operation pleted 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.

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

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