对 Flask 后端响应正文的获取请求为 null 且没有 cors 并且在没有 no-cors 的情况下失败

Posted 2023-03-04

【中文标题】对 Flask 后端响应正文的获取请求为 null 且没有 cors 并且在没有 no-cors 的情况下失败

【英文标题】：Fetch request to Flask backend response body is null with no-cors and fails without no-cors

【发布时间】：2018-12-22 14:37:53

【问题描述】：

我正在使用堆栈 React => Flask => MongoDB 创建一个应用程序。 我想要一个易于使用的开发环境，所以我将所有内容都托管在本地。

我在 Ubuntu 16 中工作

在 localhost:5000 上从 PyCharm 运行烧瓶应用程序。 使用 VS Code 编写 React 应用程序并使用控制台 npm start 命令运行它，并将其托管在 localhost:3000 上。 我想从 React 应用程序向 Flask Web api 进行 GET 调用，以将一些数据从 db 检索到前端。

烧瓶代码：

app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

client = MongoClient('localhost', 27017)
db = client['test-database']
collection = db['test-collection']

@app.route("/orders/")
@cross_origin()
def GetAllOrders():
    all_docs = list(collection.find(, '_id': False))
    print(all_docs)
    return jsonify(all_docs)

反应代码：

componentDidMount() 
  console.log(4);
  fetch("http://localhost:5000/orders/",  mode: "no-cors" )
  .then(results => 
    console.log(5);
    console.log(results);
    console.log(results.body);
  );

所以无论我设置模式"no-cors" 与否，Chrome 开发者工具网络选项卡都会显示GET 调用成功，我可以看到订单。同时，在控制台选项卡中

当我发送带有mode: "no-cors" 选项的GET 时，我得到具有属性bodyUsed: false 和body: null 的响应对象，因此无法显示订单；

当我发送 GET 没有 mode: "no-cors" 选项时，我收到错误：

Failed to load http://localhost:5000/orders/: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', but only one is allowed. Origin 'http://localhost:3000' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

并且网络选项卡检查仅显示“Access-Control-Allow-Origin”标头的值。它的值为'http://localhost:3000'。

我错过了什么？如何将这些订单导入我的 React 应用程序？

PS。我已经安装并启用了 CORS Chrome 插件。

【参考方案1】：

只需要禁用 CORS chrome 插件。那个插件就是复制 Access-Control-Allow-Origin 标头值的东西。