Chrome extension 'No-Access-Control-Allow-Origin' api call hits server but returns error

Question

I have a simple ajax request to my local server running on ngrok. The AJAX call is able to hit the server, however the browser stops the response with the following error

Failed to load https://8ee2ec1.ngrok.io/my_endpoint: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://cahhljhlafgalbkdajphjklmameocbba' is therefore not allowed access.

How can I fix this? I would have thought if this was a CORS issue the api request would not have made it to the server, but it does.

// request

  var params = {
    type: "POST",
    url: "https://8ee2ec1.ngrok.io/my_endpoint",
  }
  $.ajax(params).done(function(resp) { console.log(resp) }
  })

Manifest

{
  "permissions": ["http://*/*", "https://*/*", "notifications", "webRequest", "tabs"],
  "background": {
    "scripts": ["jquery-3.2.1.min.js", "background.js"],
    "persistent": true
  },
  "permissions": [
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.facebook.com/*"],
      "js": ["jquery-3.2.1.min.js", "content.js"]
    }
  ]
}

@wOxxOm added the manifest, thanks for your patience – user2954587 Aug 03 '18 at 20:09 — user2954587, Aug 03 '18 at 20:09
take a look here https://www.npmjs.com/package/cors – Ivan Barayev Aug 03 '18 at 20:19 — Ivan Barayev, Aug 03 '18 at 20:19

score 0 · Answer 1 · answered Aug 03 '18 at 20:12

It is a CORS issue. You need to add an Access-Control-Allow-Origin header (among other CORS headers) to your end point's response, as the error suggests. It's as simple as that.

Here's MDN's take on CORS, for reference.

It reaches the server as an HTTP request under the OPTIONS method. That's how CORS requests work; they have to reach the server to be able to read your headers. After the OPTIONS request is responded to by your server with the appropriate CORS headers it sends another under the method specified in your client-side code.

Chrome extension 'No-Access-Control-Allow-Origin' api call hits server but returns error

1 Answers1