DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
bredmond1019
bredmond1019

Posted on

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

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!

Top comments (9)

Collapse
 
miketalbot profile image
Mike Talbot

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...

Collapse
 
bredmond1019 profile image
bredmond1019 Author

Thank you. I will look into this and report back.

Collapse
 
lexlohr profile image
Alex Lohr

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).

Collapse
 
bredmond1019 profile image
bredmond1019 Author

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.

Collapse
 
lexlohr profile image
Alex Lohr

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.

Collapse
 
yanivnoema profile image
Yaniv Noema

Hi,

did you try using CORS?

something like this:
from flask_cors import CORS
app = Flask(name)
CORS(app)

Collapse
 
bredmond1019 profile image
bredmond1019 Author

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.

Collapse
 
binobose profile image
Bino Bose

As a workaround just to test the response, you can use the CORS addin for Chrome.

Collapse
 
bredmond1019 profile image
bredmond1019 Author

Great, I'll try this and report back. I didn't know this existed.

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: