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

Posted 2023-03-04

【中文标题】如何使用 flask-cors 库修复 python flask cors 问题

【英文标题】：How to fix python flask cors issue using flask-cors library

【发布时间】：2021-10-11 11:14:20

【问题描述】：

我真的需要一些帮助。我无法弄清楚我做错了什么。我不断得到

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

从源“http://localhost:3000”访问“http://localhost:5000/api/auth/login”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“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 从我的反应前端进行 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;

我错过了什么？

【参考方案1】：

您可以将您的来源设置为http://localhost:3000：

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

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

【讨论】：

这样做可以让这个“”从源 'localhost:5000/api/auth/login' 访问 XMLHttpRequest 从源 'localhost:3000' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。"""

你在javascript网站上也设置了吗？我已经编辑了答案。您应该使用前端的 url。

您能否详细说明您所说的 javascript 网站的含义？你指的是 axios 请求中的 headers 吗？

是的。我已经编辑了答案，你可以看看。