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

【问题标题】：CORS Error Despite Setting Response Headers in Flask尽管在 Flask 中设置了响应标头，但 CORS 错误
【发布时间】：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 错误:(

标签： python reactjs flask axios 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 端点

【讨论】：