Home
Support Forums

CORS issue: No 'Access-Control-Allow-Origin' header is present on the requested resource

Site name: festive-swartz-f22c4a
Frontend Github: GitHub - hhouston/good-friend-ui: ui for good friend
Backend Github: public/same user profile with good-friend-service as repo name

I have a Netlify.toml placed in root with the following:
[[redirects]]
from = “/*”
to = “/index.html”
status = 200

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

I have a proxy line used in package.json of frontend:
“proxy”: “https://api.thankyougift.io/graphql

Here is the error:

Access to fetch at ‘https://api.thankyougift.io/graphql’ from origin ‘https://thankyougift.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.

Those links point to my website hosted on Netlify and my load balancer DNS on AWS that points to my backend server. I have fixed this before by adding the proxy line and the Netlify.toml - this time no luck.

Please help,

Hunter

Could you explain a bit more what proxy setting you’ve used? It might help if you were proxying to Netlify, but I don’t think you are. Still would be good to see what you’ve tried!

I don’t know of any setting that will help with this situation - usual fix is to, at the “api.thankyougift.io” server, add the specified CORS header to allow your netlify sitename (thankyougift.io) as an allowed host.

I have a similar issue, i have 2 apps deployed on two separate netlify domains, let’s say:
https://domain-a.netlify.app (create-react-app UI) and https://domain-b.netlify.app (Node JS API)

I followed netlify’s documentation for React and added a _headers + a _redirects file next to my index.html. I also double checked my npm run build output (I use create-react-app), here’s the output + content of my _headers file:

I also tried: '*' and * without any success instead of the domain.

My NodeJS API uses npm cors with the following configuration:

import express from 'express'
import cors from 'cors'

[...]
const app = express()

app.options('*', cors())
app.use(cors())

app.use('/api/my-route', (...))

my cors version is: ^2.8.5, express: 4.17.1

when i try to invoke my api route locally, it succeeds without any issue, but why I try to to call my API once deployed with the config above, I still get:

Access to XMLHttpRequest at 'https://domain-b.netlify.app/api/my-route' from origin 'https://domain-a.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Lastly, I tried using netlify.toml file but that too didn’t work (with and without _headers combined).

Any advice ?

Thank you,

Chrys

Hi there, @chrys :wave:

Thanks so much for reaching out! It looks like this thread has been a bit quiet since you last reached out. Can you confirm if you are still encountering this error or not? If you are, are there any additional debugging steps you have taken since you last wrote in?

Hi, yes I am still encountering the error, I wonder if Netlify couldn’t simply provide a sample github project to showcase both a working React + Express configuration working with Netlify.

Right now, I am simply considering deploying everything as one big express server and serve the UI from there instead of splitting the two but this is not idea long term.

Any ideas ?

thank you

In your _headers file, is that a double space or a tab before the rule? It needs to be a double space :+1: