Is there a way to fix "Blocked by CORS policy" on the front end?

Question

I've built a tool that allows users to crawl there own website sitemap. Now I've pushed it to staging I obviously get the Cors error.

Is there a way to fix that in the front end without writing a cloud function?

Error: "Access to XMLHttpRequest at 'https://www.userswebsite.com/page-sitemap.xml' from origin 'https://app.mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Firebase.json file

{
"hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

CORS is *controlled* by the backend - there is no way to "fix" CORS, if there were, then CORS would be completely pointless — Jaromanda X, Nov 25 '22 at 04:14

score 1 · Answer 1 · answered Nov 25 '22 at 04:23

1

No. Browsers heavily limit websites' ability to communicate with other websites client-side for security reasons.

Generally* speaking, it is a misconception that CORS limits what resources your application can access like a blacklist, instead, it is closer to whitelist.

If you need to reliably perform cross-origin requests, you need to do it server-side.

answered Nov 25 '22 at 04:23

Slava Knyazev

5,377
1
22
43

Okay I understand. So I would need to write a cloud function every time they crawl there sitemap to enable cors? – user16034511 Nov 25 '22 at 04:31
It can be a single cloud function that accepts a URL aka cors-anywhere: https://github.com/Rob--W/cors-anywhere – Slava Knyazev Nov 25 '22 at 04:34

Is there a way to fix "Blocked by CORS policy" on the front end?

1 Answers1