Javascript / Flask - No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I have a FlaskAPI back-end and a Vue front-end and I am trying to send responses between the two. I am having an issue with the implementation of FlaskCors. This module should handle 'OPTIONS' as well from what I can tell, however I am having issues still. Any help would be appreciated. The documentation does not say to utilize the '@cross-origin' decorator if I choose to allow everything.

Javascript error:

Access to XMLHttpRequest at 'http://localhost:5000/login' from origin 'http://localhost:3000' 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.

Flask Runner

#! /usr/bin/python3.6
from caffeine import create_app
import os

app = create_app()

# app.secret_key = os.environ.get("SECRET_KEY")

if __name__ == "__main__":
    app.run(debug=True, host="0.0.0.0", port=5000)

init.py

import os
from pathlib import Path

from flask_api import FlaskAPI
from flask_cors import CORS

from caffeine.config import Config


def create_app():
    """Instantiates and initialize the Flask application"""
    app = FlaskAPI(__name__)
    app.config.from_object(Config)
    CORS(app)

    from caffeine.routes.bp_auth import auth

    app.register_blueprint(auth)

    return app

Flask Config:

class Config:
    """Base configuration."""

    API_VERSION = "1.0.0"
    SECRET_KEY = os.environ.get("SECRET_KEY")
    CORS_HEADERS = "Access-Control-Allow-Origin"

Flask Auth Blueprint:

@auth.route("/login", methods=["GET", "POST", "OPTIONS"])
def login():
    """
    present the 'login-page' for entering LDAP credentials to be validated and added to the database

    if user is already authenticated, they will be routed to the home route (routes.py)

    :return: user login-in UI view
    """

    if request.method == "POST":
        user_sso = request.data["sso"].strip()

        access_token = encode_access_token(user_sso)

        response = jsonify(
            status="success",
            message="successfully logged in",
            access_token=access_token,
            token_type="bearer",
            expires_in=get_token_expire_time(),
        )
        response.status_code = HTTPStatus.CREATED
        response.headers["Cache-Control"] = "no-store"
        response.headers["Pragma"] = "no-cache"

        return response

shiny shiny · Accepted Answer · 2021-02-11T18:45:29

i've had a similar problem with react, this is how i could solve it on my app:

class config: CORS_ALLOW_CREDENTIALS = True

init.py

...
from flask_cors import CORS

cors = CORS()

def create_app():
    ...
    cors.init_app(app=app, supports_credentials=True)
    ...

Javascript / Flask - No 'Access-Control-Allow-Origin' header is present on the requested resource

1 Answers