Access-Control-Allow-Origin Policy

[AndrewAmiri]

Hi Netlify,
For more details, Let me say clearly:
I have 2 websites capturex.cloud and capturex.health. The second is new and I added it to be used as a staging environment. Both are on GitHub but in different accounts but with the same repository files.
The first is OK and works properly.
The second has a Cors error when trying to log in.
I checked the header of capturex.cloud and capturex.health for the login API call.
This is the header of capturex.cloud reqquest, which is OK:

General:

1. Request URL:

   https://api.capturex.cloud/api/auth/login

2. Request Method:

   POST

3. Status Code:

   403

4. Remote Address:

   172.67.218.163:443

5. Referrer Policy:

   strict-origin-when-cross-origin

Request.Header:

1. :authority:

   api.capturex.cloud

2. :method:

   POST

3. :path:

   /api/auth/login

4. :scheme:

   https

5. accept:

   application/json, text/plain, /

6. accept-encoding:

   gzip, deflate, br

7. accept-language:

   en-US,en;q=0.9

8. cache-control:

   no-store

9. content-length:

   41

10. content-type:

    application/json;charset=UTF-8

11. origin:

    https://capturex.cloud

12. pragma:

    no-cache

13. referer:

    https://capturex.cloud/

14. sec-ch-ua:

    “Not?A_Brand”;v=“8”, “Chromium”;v=“108”, “Google Chrome”;v=“108”

15. sec-ch-ua-mobile:

    ?0

16. sec-ch-ua-platform:

    “Windows”

17. sec-fetch-dest:

    empty

18. sec-fetch-mode:

    cors

19. sec-fetch-site:

    same-site

20. user-agent:

    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

And this is the header of the second which raises cors error:

General:

1. Request URL:

   https://api.capturex.health/api/auth/login

2. Referrer Policy:

   strict-origin-when-cross-origin

3. Request Headers

4. Provisional headers are shown
   Learn more

5. Accept:

   application/json, text/plain, /

6. Cache-Control:

   no-store

7. Content-Type:

   application/json;charset=UTF-8

8. Pragma:

   no-cache

9. Referer:

   https://capturex.health/

10. sec-ch-ua:

    “Not?A_Brand”;v=“8”, “Chromium”;v=“108”, “Google Chrome”;v=“108”

11. sec-ch-ua-mobile:

    ?0

12. sec-ch-ua-platform:

    “Windows”

13. User-Agent:

    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

I couldn’t find how and why the headers are different.
I couldn’t find out if I must do anything in Cloudflare.

Can anyone help me, please?

[hrishikesh]

No duplicates please:

Access to XMLHttpRequest at 'https://xyz.herokuapp.com/products' from origin 'https://abc.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

I am building my first MERN web app and I have to submit on Monday (that is in 2 days) netlify site name : https://venerable-daffodil-ed3e93.netlify.app/ I am able to deploy my app but after deployment I cannot login, and the above is the error that I`m getting TECH STACK = NODE + EXPRESS + REACT + MONGODB my backend server.js looks like this const express = require('express'); const cors = require('cors'); const app = express(); const http = require('http'); require(`dotenv` ).config(); co…

[Jamesjr95]

Hello,

Ive added this to my netlify.toml file in the root directory:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

I’ve added this to my _headers file in the root directory:

/*
  Access-Control-Allow-Origin: *

I get this error when I make a get request to my express app backend:

cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/?q=f.json. (Reason: CORS request did not succeed). Status code: (null).

My API request worked on my local server before I deployed to Netflify and I haven’t been able to solve this problem. Any support would be greatly appreciated.

My domain name —> https://localweatherwatch.netlify.app/

[hrishikesh]

Same advice for you @Jamesjr95, please do not post duplicates:

Cross-Origin Request Blocked

I just deployed my project to Netlify: https://localweatherwatch.netlify.app/ I can make api calls on my local server with no issues. When I try to send a request through the hosted site I get this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/?q=t.json. (Reason: CORS request did not succeed). I’ve allowed all origins to make requests to my api but Netlify still triggers a CORS error. I’m not too sure where to go fro…

That doesn’t make us answer you any faster

[herodot.sk]

I am struggling to call my one third-api after deployment in netlify. It is working in development.
It is returning some chunk of page from api which seems cors errors.

I set my _redirects file in root

Netlify settings for single-page application

/api/* https://api.dictionaryapi.dev/:splat 200
/* /index.html 200

Should I do something more?

[hrishikesh]

@herodot.sk

Should I do something more?

To start with, let us know the name of the site, so we can check further.

[dmytro.yevdokymov]

I’m facing the same issue:

I’m trying to call Netlify function from another website (for example from https://portfolio-starter-template.webflow.io/) using the below request:

fetch("https://brilliant-basbousa-e67359.netlify.app/api/test", {
    "method": "POST",
    "headers": {
        "Content-Type": "application/json"
    }
});

As a result, I receive
Access to fetch at 'https://brilliant-basbousa-e67359.netlify.app/api/test' from origin 'https://***********.webflow.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I already tried solutions suggested in similar topics:

1. _headers file:

/*
  Access-Control-Allow-Origin: *

2)netlify.toml:

[[headers]]
    for = "/*"
        [headers.values]
            Access-Control-Allow-Origin = "*"
 [[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

3. Sample script for the function:

 const fetch = require("node-fetch");

  const API_ENDPOINT = "https://icanhazdadjoke.com/";
  
  const headers = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, OPTION",
    "Content-Type": "application/json"
  };

  exports.handler = async (event, context) => {
    return fetch(API_ENDPOINT, { headers: { Accept: "application/json" } })
      .then((response) => response.json())
      .then((data) => ({
        statusCode: 200,
        body: data.joke,
      }))
      .catch((error) => ({ statusCode: 422, body: String(error) }));
  };

Thank you

[audrey]

@dmytro.yevdokymov,

It looks like you’ve defined the headers, but you’re not sending that along with the response. To fix, you could change the code to something like:

const fetch = require("node-fetch");

  const API_ENDPOINT = "https://icanhazdadjoke.com/";

  exports.handler = async (event, context) => {
    return fetch(API_ENDPOINT, { headers: { Accept: "application/json" } })
      .then((response) => response.json())
      .then((data) => ({
        headers: {
           "Access-Control-Allow-Origin": "*",
           "Access-Control-Allow-Methods": "GET, POST, OPTION",
           "Content-Type": "application/json"
        },
        statusCode: 200,
        body: data.joke,
      }))
      .catch((error) => ({ statusCode: 422, body: String(error) }));
  };

Could you give that a try and let us know if it helps?

[dmytro.yevdokymov]

@audrey

headers: {
           "Access-Control-Allow-Origin": "*",
           "Access-Control-Allow-Methods": "GET, POST, OPTION",
           "Content-Type": "application/json"
        },

That works perfectly, thanks a lot

[lynnchin]

Hi I would like to know how did you fix this issue?
I tried create _headers file with
/* Access-Control-Allow-Origin: *
and _redirects file with
/* /index.html 200

and I still getting errors like

Access to fetch at 'https://xxx.auth0.com/oauth/token' from origin 'https://xxx.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Can someone assist? Thanks.

[hrishikesh]

@lynnchin

Access to fetch at ‘https://xxx.auth0.com/oauth/token’

Auth0 would have to send those headers in your case, not Netlify.

[lynnchin]

Yes I found the problem now. It seems that I need to configure Auth0 to accept Netlify link. Thanks.

[Kravetskyi]

Have the same error over and over. I am new to Netlify and coding in general. I tried to deploy a weather app which, of course, fetches weather data from a free API with HTTP protocol.
I have a netlify.toml file which looks like this:

[[headers]]
  for = "/*"
    [headers.values]
      Access-Control-Allow-Origin = "*"

and a _headers file which looks like this:

/*
  Access-Control-Allow-Origin: *

Still the error shows:
Access to fetch at ‘https://api.weatherunlocked.com/api/forecast/’ from origin ‘https://kravetskyi-weather-app.netlify.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

At this point I am not sure what to do, tried to deploy on Vercel, added vercel.json file to enable CORS but the error persists

Here is the repo for the app in case it might help:

GitHub - Kravetskyi/weather-app

[BreTuck]

Were you able to fix this? If so, how? I am having the same or a similar issue. I have set up my netlify.toml file as you have and the issue persists. I also have cors headers (Access-Control-Allow-Origin) set in my server code.

[BreTuck]

Never mind, I was able to narrow down my issue to the server side code of my edge function (Supabase).