Re: [crx] Chrome extension MV3 CORS error in content.js

[Simeon Vincent]

In this case do you control mysite.com? If so, it looks like you're not properly handling the CORS preflight request. If not, you'll need to change how your issue the request in order to avoid the CORS error. I'd suggest using message passing to send the appropriate data from your content script to your background script, perform the request in the background, then pass the appropriate response data from the background to the content script. 

Simeon - @dotproto

On Wed, Mar 15, 2023 at 11:01 AM Sandunika Fernando <sandun...@gmail.com> wrote:

I need to perform API calls through content.js based on google search results. 

    const params = new URLSearchParams({
          host: $search,
        });

        fetch(
          "https://mysite.com/api/getHosts?" +
          params.toString(),
          {
            method: "GET",
            headers: headers,
          }
        )

but im getting below CORS error :

Access to fetch at 'https://mysite.com/api/getHosts' from origin 'https://www.google.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

api/getHosts endpoint is allowing access to google.com
'Access-Control-Allow-Origin' => 'https://www.google.com'

set host permission as below on my manifest 

 "host_permissions": ["https:// mysite.com /*" , "https://*.google.com/*"
    ],

How to solve this

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/0fef4f48-0c74-4872-93ab-5efad508dc5dn%40chromium.org.

[Jackie Han]

CORS header is a HTTP OPTIONS request, not HTTP GET request, I guess you didn't configure it correctly.

On Thu, Mar 16, 2023 at 6:35 AM SF <sandun...@gmail.com> wrote:

mysite.com is my backend application which holds api endpoints,  so ' /api/getHosts'  endpont has set follwoing header $headers['Access-Control-Allow-Origin'] = 'https://www.google.com';

when user performes a googlesearch im passing a meessage to content.js through backgroundjs to fetch search results urls and check if it has matching hosts,for that I need to call my API.

I have tried following manifest changes too. but still same error

"declarative_net_request" : {
"rule_resources" : [{
"id": "ruleset_1",
"enabled": true,
"path": "rules_1.json"
}]
},

"host_permissions": [
"http://mysite.com/*",
"http://*.google.com/*"
],
"permissions": [ "declarativeNetRequest",
"declarativeNetRequestFeedback",

rules_1.json

[
{
"id" : 1,
"priority": 1,
"action" : {
"type" : "modifyHeaders",
"responseHeaders": [
{"name": "Access-Control-Allow-Origin", "value": "*"}
]
},
"condition" : {
"urlFilter" : "|https*",
"resourceTypes" : ["main_frame"]
}
}
]

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/2fb702ba-8611-4b1b-82ea-3c53f9cce0f8n%40chromium.org.