[FIXED] How to set HTTP header 'Access-Control-Allow-Origin' for python Neoflix app

[emily]

I'm not sure if this problem was unique to my browser, but when I first started up Neoflix on my local host, I didn't see anything populate under the "Popular Moves" or "Latest Releases" sections.

Eventually I looked into it with the developer tools inspector and saw several errors (in the network tab)

Looking at the errors, one of them read,

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/api/movies?sort=imdbRating&order=desc&limit=6&limit=6. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 308.

Since this is my first time working on a flask app, I wasn't sure exactly how to fix this, but looking around online I found out that you can install the package Flask-CORS, which will allows you to add the missing HTTP request header.

In requirements.txt, I just added:

Flask-CORS==3.0.10

and at the top of app-python/api/init.py,

 from flask_cors import CORS

and in the same file in the method create_app,

CORS(app)

Now it's working much better, although there are still images that don't show up, but that might be unrelated.

[adam_cowley]

Hey Emily, thanks for the heads up. I will add Flask-CORS to the repo, hopefully this will stop anyone else having these issues in future.

Out of interest, what was it that lead you to open up http://127.0.0.1:3000 rather than localhost:3000?

[emily]

Oh! I just used the IP because I didn't realize there was a difference, and copied and paste it from the flask run output. But after looking into, I learned something that there is a difference in how the requests are sent!

On the other hand, running 127.0.0.1 does pass through the network card, which may be affected by firewall settings and configurations (https://phoenixnap.com/kb/localhost-vs-127-0-0-1]

I tried using localhost:3000 without the CORS and that worked! That is good to know, thanks for the tipping me off in that direction :)