可以得到反应和烧瓶 - 在本地工作

Question

我正在尝试使用React/nodejs前端和烧瓶后端来获取一个应用程序，以便在本地运行以进行开发目的。最后一个小时，我一直在搜寻Stackoverflow，但是我似乎无法超越CORS问题。我有：

import json
 
from flask import Flask, request
from flask_cors import CORS, cross_origin

app = Flask(__name__)

# Enable cors requests
CORS(app)

# Initiate model

@app.route("/query", methods=["POST"])
@cross_origin(origin="*", headers=["Content-Type"])
def query():
    """Endpoint for receiving bot response"""
    print(request)
    query = request.json
    bot_answer = blablagetanswer() ... #filling the json 
    return json.dumps({"botResponse": bot_answer})


if __name__ == "__main__":
    app.run(
        host="0.0.0.0", port=80, debug=True,
    )

我已经阅读了多个答案，并尝试了在烧瓶中进行多种cors处理的变化（在有或没有@cross_origin（） decorater中，添加了@cross_origin（oneration =“*”）甚至@cross_origin（onect =“*”，headers = [“ content-type”]） @app.route（）），但无济于事。

我什至尝试在烧瓶应用程序中添加这两行：

app.config["CORS_HEADERS"] = "Content-Type"
CORS(app, resources={r"/*": {"origins": "*"}})

也无济于事。

我fetch from react这样：

var jsonData = { "lastConversations": [this.state.chatInput] }
console.log("Sending Chat: " + JSON.stringify(jsonData, null, 2));
fetch('http://my-ip:80/query', {
  method: 'POST',
  mode: 'cors',
  body: JSON.stringify(jsonData)
})

日志确实包含我要发送的文本，但是Chrome只是说：

访问'http：// my-ip/query''http：// localhost：3000'已被CORS策略阻止：no'access-control-control-allow-origin'标头请求的资源。如果不透明的响应满足您的需求，请将请求模式设置为“无库”，以通过禁用CORS来获取资源。

我想念什么？这只是用于本地测试，我该如何工作？

Answer 1

事实证明，在与JSON合作时，重要的是要确保您让对方知道您正在发送应用程序/JSON数据。像这样修改获取解决方案：

var jsonData = { "lastConversations": [this.state.chatInput] }

console.log("Sending Chat: " + JSON.stringify(jsonData, null, 2));
fetch('http://my-ip:80/query', {
  method: 'POST',
  mode: 'cors',
  headers: {   # this is the key part
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(jsonData)

})