[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 🙂

[adam_cowley]

I have just upgraded the entire repo to use the 5.0 version of the Python Driver and in the process also added CORS and fixed the issues with an outdated library in Python 3.10.  We should be good now but feel free to ping me if you continue to have problems.