Flask/Flask-CORS: CORS header ‘Access-Control-Allow-Origin’ missing

Question

I'm trying to link a Flask backend, running locally on port 5000 with a Vue.js frontend, running locally on port 8080.

I'm able to successfully signup and login, but fail to submit an article in the app, with the following error in the browser console.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/articles. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

The Flask backend uses Flask CORS (initializes them for every blueprint) and I've provided the localhost/127.0.0.1 origins to the whitelist.

#settings.py
    CORS_ORIGIN_WHITELIST = [
        'http://0.0.0.0:4100',
        'http://localhost:4100',
        'http://0.0.0.0:8000',
        'http://localhost:8000',
        'http://0.0.0.0:4200',
        'http://localhost:4200',
        'http://0.0.0.0:4000',
        'http://localhost:4000',
        'http://localhost:8080',
        'http://0.0.0.0:8080',
        'http://127.0.0.1:8080',
        'http://192.168.100.6:8080',
        'localhost'
    ]

#app.py
def register_blueprints(app):
    """Register Flask blueprints."""
    origins = app.config.get('CORS_ORIGIN_WHITELIST', '*')
    cors.init_app(user.views.blueprint, origins=origins)
    cors.init_app(profile.views.blueprint, origins=origins)
    cors.init_app(articles.views.blueprint, origins=origins)

    app.register_blueprint(user.views.blueprint)
    app.register_blueprint(profile.views.blueprint)
    app.register_blueprint(articles.views.blueprint)

#extensions.py

cors = CORS()

Any help would be greatly appreciated.

score 2 · Answer 1 · answered Sep 02 '19 at 21:56

2

Have you tried adding the port to the localhost entry?

#settings.py
    CORS_ORIGIN_WHITELIST = [
        'http://0.0.0.0:4100',
        'http://localhost:4100',
        'http://0.0.0.0:8000',
        'http://localhost:8000',
        'http://0.0.0.0:4200',
        'http://localhost:4200',
        'http://0.0.0.0:4000',
        'http://localhost:4000',
        'http://localhost:8080',
        'http://0.0.0.0:8080',
        'http://127.0.0.1:8080',
        'http://192.168.100.6:8080',
        'localhost:8080'
    ]

answered Sep 02 '19 at 21:56

Sergio Pulgarin

869
8
20

I've tried, but without result, same error: > Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/articles. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). – cnstlungu Sep 03 '19 at 19:41
1

It's a bit weird that your error is header missing entirely. Other errors were you have the wrong origins are listed, I think the error would be something like: "not allowed by access policy". It can be that your Flask app is misconfigured and it's not sending the header at all. – Sergio Pulgarin Sep 04 '19 at 05:53

Flask/Flask-CORS: CORS header ‘Access-Control-Allow-Origin’ missing

1 Answers1

Linked