如何使用flask-cors库修复python flask cors问题

Question

我真的需要一些帮助。我不知道我做错了什么。我不断地得到

编辑:前端React应用程序在localhost:3000上运行，后端在localhost:5000上运行

CORS策略阻止了从源'http://localhost:3000‘在'http://localhost:5000/api/auth/login’对XMLHttpRequest的访问:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在' Access - control -Allow- origin‘标头。

def create_app(test_config=None):

    logger = logging.getLogger(__name__)
    logger.info("Flask App Starting")
    # create and configure the app
    app = Flask(__name__, instance_relative_config=True)
    CORS(app)
    cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
    logging.getLogger('flask_cors').level = logging.DEBUG
    
    app.config.from_mapping(
        SECRET_KEY="dev",
        JWT_SECRET_KEY="super secret key", 
        JWT_ACCESS_TOKEN_EXPIRES=timedelta(hours=2), 
    )
    
    if test_config is None:
        # load the instance config, if it exists, when not testing
        app.config.from_pyfile("config.py", silent=True)
    else:
        # load the test config if passed in
        app.config.from_mapping(test_config)


    jwt = JWTManager(app)

    

    """
    Adding blueprints 
    """
    from app.routes import tester
    from app.routes import auth
    from app.routes import api_routes
    from app.routes import similar_routes

    app.register_blueprint(tester.bp)
    app.register_blueprint(auth.bp)
    app.register_blueprint(api_routes.bp)
    app.register_blueprint(similar_routes.bp)

    @app.before_request
    def check_login():
        """Before each request check if token exist."""
        pass 
        logger.info("Checking if token is required")
        if (not getattr(app.view_functions[flask.request.endpoint], "is_public", False)):
            logger.info("Token required")
            try:
                result = verify_jwt_in_request(locations="headers")

                logger.debug(f"Identity sent in is {get_jwt_identity()}")
            except Exception as e:

                logger.error("Error occured during checking token")
                logger.error(e)
                return jsonify(msg="Token Expired"),401


    @app.errorhandler(Exception)
    def all_exception_handler(error):
        logger.error("Error caught" + str(error) )
        return jsonify(msg="Oh no! A Server error occured. :,( "), 500


    return app

if __name__ == "__main__":
    loggingSetup()
    app = create_app()
    logger.info("App Created")
    app.run(debug=True)
    logger.info("App Running")

我正在使用axios从我的react前端进行API调用

axios.defaults.baseURL = "http://localhost:5000/api"
function getHeaders(token){
        return {
            'Accept': 'application/json',
            'Content-Type': 'application/json;charset=UTF-8',
            "Authorization": "Bearer " + token,
            'Access-Control-Allow-Origin': '*'
        }
    }

async function createCustomObject(token) {
        let url = "/ontology/create-object";
        let options = {
            method: "POST",
            url: url,
            headers: getHeaders(token),
        };
        let response = await axios(options).then((response) => {
            let data = response.data
        }).catch((error) => {
            handleError(error.response)
        })
        return response;

我遗漏了什么？

Answer 1

您可以将原点设置为http://localhost:3000

cors = CORS(app, resources={r"/api": {"origins": "http://localhost:3000"}})

'Access-Control-Allow-Origin': 'http://localhost:3000'