Question

我正在使用堆栈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调用，并且可以看到订单。同时，在控制台标签中

当我发送带有GET选项的mode: "no-cors"时，得到的响应对象具有属性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插件。

Answer 1

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

没有烧瓶的对Flask后端响应主体的获取请求为null，并且没有烧瓶的失败

1 个答案: