CORS issue with React App

Support
, ,
1

Hi Everyone!

I’m aware that this topic might be a duplicate, so sorry about that.
That’s my 2nd day searching for a way to fix the famous and very annoying CORS issue. I’ve already tried solutions from this forum, without success (which is why I’m creating this new post).

Here is my github repo: https://github.com/pyGab86/ovReact

Here is the deployed site: https://heuristic-beaver-8cd8e4.netlify.app

And here is the error I get if I enter TSLA into the input (the app is making a get request to https://cdn.cboe.com/api/global/delayed_quotes/options/TSLA.json) :

Access to XMLHttpRequest at above url from origin ‘https://heuristic-beaver-8cd8e4.netlify.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I managed to handle this CORS issue on my local environment with a setupProxy.js file or by using a prefixed url as a proxy BUT, none of these options are working on my deployed site.

I have also tried using a netlify.toml file with this line inside: /cdn/* https://cdn.cboe.com/:splat 200
, that I placed inside the build folder (I use the build folder to deploy my site), but still have this issue.

I have no clue of how to set/where to place this netlify.toml file to create the proxy that would save my entire life.

A solution would be very very welcome :smiley:
I guess for now I’ll just turn off my computer, go outside and have a beer…

2

Hi @pygab86,

I think there are 2 things to note:

  1. I don’t see a netlify.toml file in the repo.

  2. I think you’re confusing netlify.toml with _redirects file. The former goes in the root of the repo and not in the publish directory. Also, the syntax that you’ve used is of the _redirects file which goes in the publish directory. So, you can choose either netlify.toml or _redirects, but their syntax is not the same and they go in different directories.

Let us know if making this change makes a difference.

3

Hi @hrishikesh,

You are right to say that it is not in my repo. When building the app, it automatically removed it from the folder. What I did then, is to add it manually to the folder after the build operation. Seeing that it wasn’t working, I deleted it and made a new deploy without it, for no logical reason :sweat_smile:.

So if I understand well, I am totally messing up with my files :joy: However, I’m still confused about what I should concretly type in netlify.toml and in _redirects…

I would really appreciate if you could show me how to configure these files. All this is new to me

Thank you

4

Basically there are 2 ways you could configure redirects on Netlify:

  1. Using _redirects file
  2. Using netlify.toml file

This documentation page does a great job at explaining these 2 files: Redirects and rewrites | Netlify Docs

However, to summarize:

  1. _redirects file should go in the publish directory and has the one-liner syntax that you have used.
  2. netlify.toml goes in the root of the repo or the base directory and has an extended syntax like:
[[redirects]]
  from = "/foo/"
  to = "/bar/"
  status = 200

Hope this helps.

5

Thanks for your answer.

I’m still having trouble to set this up correctly I’m afraid.

What I did, is to place a _redirects file inside my build (publish) folder and it didn’t work. Here is the file config:

/cdn/* https://cdn.cboe.com/:splat 200

for the netlify.toml file, I am not sure about the configuration. I tried

[[redirects]]
from = "/* "
to = “https://cdn.cboe.com”
status = 200
force = true
headers = {Access-Control-Allow-Origin: “*”}

But I am not sure of what I should put in the “from” and “to” arguments…

Could you tell me if my files configurations are correct, please?

Thanks

6

Is this the result you’re looking for: https://kind-einstein-5bf432.netlify.app/?

I published that website and now I’m not getting any CORS errors, however a 403 error exists. Even then, if that’s what you’re looking for, maybe this repo would help: https://github.com/Hrishikesh-K/ovReact. It’s your repo cloned and edited with appropriate changes.

Changes I made:

  1. Added the correct TOML file
  2. Changed your axios URL to the one used to redirect

Problems I still notice in your repo:

  1. I still can’t see a _redirects file in your repo.
  2. You need not commit build folder to your repo as Netlify will run the build for you.
  3. You need not add _redirects file to the build folder, you can add it to public folder and React will copy it to the build folder during the build.

Then again, you need not fix these errors anymore if you clone my repo and use it. You still might have to check for the 403 error though. Maybe it uses an API key or something which I don’t have.

7

Thank you!!!

It is working!

Also thank you for the react explanations, that makes more sense now.

The 403 error is totally normal BTW. I don’t know what you typed in, but if the ticker you enter does not exists, then you get a 403. If you try to enter TSLA, you should see it’s stock price.

Thanks again! :smiley:

1 Like
8

Hi everyone
I
netlify
was initially facing a cors error I fixed the cors error but I am still getting a 404 error in the console and data are not being fetched it is working fine locally

9

You don’t have any redirects. Where do you expect /api/donationGet to point to?