CORS Issue in Chrome Developer Extension

Question

I am a novice in Chrome Extension Development and I am developing a Chrome Developer Extension (appears as a part of Developer Tools). This requirement is to make External Service (some URL )call which may or may not be in the same Server (of origin). From the documentation I see the extensions are not restricted by the Same Origin Policy. https://developer.chrome.com/extensions/xhr

However I am running into CORS issue while I try to call an external service.

The Manifest.json looks like the below one, where I have permission to all websites.

"permissions": [
        "tabs",
        "clipboardWrite",
        "http://*/*",
        "https://*/*"
    ],

In the code I am trying to call HTTP POST on some URL , the code looks like

gwUrl = 'http://services.odata.org/V2/(S(lts2i32bwwy01zoq4cxyscwt))/OData/OData.svc/Products';
var xhr = new XMLHttpRequest();
xhr.open("POST", gwUrl , true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function() {}
xhr.send({ "ID":17, "Name": "Bread", "Description": "Whole grain bread"});

I am getting the following Error.

OPTIONS http//services.odata.org/V2/(S(lts2i32bwwy01zoq4cxyscwt))/OData/OData.svc/Products 501 (Not Implemented)

XMLHttpRequest cannot load http//services.odata.org/V2/(S(lts2i32bwwy01zoq4cxyscwt))/OData/OData.svc/Products. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://cdcbiglainpfeapfejdjdkldcehjakfi' is therefore not allowed access. The response had HTTP status code 501.

Error Screenshot Can anyone please guide me to fix the issue.

score 2 · Answer 1 · edited May 23 '17 at 11:55

You may want to try adding Access-Control-Allow-Origin header. The response header indicates whether the response can be shared with resources with the given origin.

You may want to also check Using CORS tutorial for better understanding. This tutorial mentioned about the need to include Access-Control-Allow-Origin header in all valid CORS responses and omitting the header will cause the CORS request to fail.

Solutions given in the following SO posts might also help:

Error in Chrome only: XMLHttpRequest cannot load file URL No 'Access-Control-Allow-Origin' header is present on the requested resource
XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
How does Access-Control-Allow-Origin header work?

CORS Issue in Chrome Developer Extension

1 Answers1

Linked