How to fix CORS policy in Google Chrome extension?

Question

Google Chrome

I'm trying to send a request to my host to process data, but I keep getting an error in the console:

Access to XMLHttpRequest at 'http://localhost/index.php' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://localhost/index.php net::ERR_FAILED 200

Here is my manifest.json :

{
  "name": "Main JS",
  "description": "Пользовательский скрипт с использованием JQuery",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [{
    "js": [
      "jquery.js",
      "main.js"
    ],
    "matches": ["http://localhost/"]
  }],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "permissions": [
    "http://localhost/",
    "tabs",
    "storage",
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "declarativeNetRequestWithHostAccess",
      "webRequest",
      "<all_urls>",
      "webRequestBlocking"
  ],
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

Here is rules.json :

[{
    "id" : 1,
    "priority": 1,
    "action" : {
      "type" : "allowAllRequests"
    },
    "condition" : {
      "urlFilter" : "*index.php",
      "domains" : ["localhosh"],
      "resourceTypes" : ["main_frame"]
    }
}]

How can I fix this error?

Answer 1

You need to enable CORS on the server
Here is an explanation

Answer 2

Google what CORS is and start giving the correct headers from the backend.