No 'Access-Control-Allow-Origin' header is present...

Publish Date: Feb 7 '22

4 9

Hi all,

I created a very basic app just to try and test out authentication.

I am using flask on the back end, and React on the front end.

When I make the request through the firefox browser, it works (most of the time!). But it does not from chrome.

I get the following message:

Access to fetch at 'http://localhost:5000/api/v1/register' from origin 'http://localhost:8080' 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.

If I submit a request via Postman or Curl, it works just fine. So I feel that the backend server code is working fine.

I have tried both including and excluding the headers for 'Access-Control-Allow-Origin' and 'Content-Type'. In all scenarios it doesn't work.

When I googled what to fix, I get a complicated answer like I need to set up a Nginx proxy server.

I am just trying to build apps for my portfolio.

Thank you so much!

Comments 9 total

Yaniv NoemaFeb 7, 2022
Hi,

did you try using CORS?

something like this:
from flask_cors import CORS
app = Flask(name)
CORS(app)
- bredmond1019Feb 9, 2022
  Hi, yes I am using this.
  
  It only seems to have issues when I am doing some sort of authentication process. If i am just calling my API to grab data from my database, or make an outside API call, it works just fine.
Bino BoseFeb 8, 2022
As a workaround just to test the response, you can use the CORS addin for Chrome.
- bredmond1019Feb 9, 2022
  Great, I'll try this and report back. I didn't know this existed.
Mike Talbot ⭐Feb 8, 2022
Chrome is super secure on this stuff, if you want to test because in the future both the backend and the front end will be served from the same URL (and in that case there will be no problem) then you can use a CORS proxy. Personally I'd first try to install a Flask one as suggested in the answer from @yanivnoema, but you can use one of these free proxies: nordicapis.com/10-free-to-use-cors...
- bredmond1019Feb 9, 2022
  Thank you. I will look into this and report back.
Alex LohrFeb 8, 2022
It seems you're running the API on your own server, so you should be able to add the headers on the API service (I assume you've only added them on your page, where they are not required or otherwise it should have worked).
- bredmond1019Feb 9, 2022
  I'm not quite sure i understand exactly what you're saying.
  
  On my frontend React App, i have included the headers (also tried without them) and it wasn't working. Am i supposed to add headers on the flask portion as well?
  
  When i make the request on the front end, i can't even see the request on the terminal for the backend. It seems that Chrome and Firefox block the request before it even hits the backend.
  - Alex LohrFeb 9, 2022
    Whatever runs on port 5000 needs the headers. If you request anything more complex, the browser will send an options request before the original request to make sure the headers are present. If they aren't, the actual request is then blocked.

Add comment

bredmond1019 @bredmond1019

No 'Access-Control-Allow-Origin' header is present...

Comments 9 total