尽管在 Flask 中设置了响应标头，但 CORS 错误

Posted 2023-03-04

【中文标题】尽管在 Flask 中设置了响应标头，但 CORS 错误

【英文标题】：CORS Error Despite Setting Response Headers in Flask

【发布时间】：2020-10-01 14:58:55

【问题描述】：

我在 localhost:5000 上托管了一个烧瓶端点，我试图从 localhost:3000 上托管的 React 应用程序向它发送请求。端点如下所示：

@app.route('/createUserSession', methods=["POST", "OPTIONS", "GET"])
@cross_origin()
def createUserSession():
    response = Response()
    response.headers["Access-Control-Allow-Origin"] = "http://localhost:3000"
    response.headers["Access-Control-Allow-Methods"] = ["GET", "POST", "OPTIONS"]
    response.headers["Access-Control-Allow-Credentials"] = "true"
    return response

我使用 axios 从前端调用它，如下所示：

const api = axios.create(
        withCredentials: false,
        crossorigin: true
      );
api.post('http://127.0.0.1:5000/createUserSession', queryString.stringify(params),
        headers: headers)
        .then(function (response) 
          console.log(response);
        )
        .catch(function (error) 
          console.log(error);
        );

我尝试了标头的各种排列，每次都收到 CORS 错误，告诉我来源不被允许或凭据标头设置为 false。除了使用代理之外，还有其他解决方案吗？谢谢！

【问题讨论】：

你试过response.headers['Access-Control-Allow-Origin'] = "*"吗？

为什么不在 package.json 中设置proxy。我假设服务器和客户端代码都将托管在生产中的同一个域上。在服务器上添加 cors 只会使服务器容易被其他站点滥用。

我试过response.headers['Access-Control-Allow-Origin'] = "*"，我还尝试在我的前端的package.json中添加“proxy”：“localhost：5000”。仍然收到 CORS 错误:(

【参考方案1】：

尝试使用 Flask-CORS (https://flask-cors.readthedocs.io/en/latest/)。在初始化 Flask 应用程序的地方初始化 Flask-CORS。 Flask-CORS 官方文档中在您的代码上下文中所述的简单用例是：

from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
cors = CORS(app, resources=r"/createUserSession": "origins": "*")

@app.route("/createUserSession")
def createUserSession():
  return "user session response"

在 API 端点中有前缀总是更好的，这样类似类型的端点可以组合在一起。例如，您可以将端点更改为@app.route("/api/createUserSession")

使用这个之后，您的 CORS 实例将是 cors = CORS(app, resources=r"/api/*": "origins": "*")，从而更容易在同一个 CORS 实例中覆盖带有前缀 /api 的其他 API 端点