gpt4 book ai didi

javascript - 从 Flask 后端 react axios GET 空数据

转载 作者:行者123 更新时间:2023-11-30 19:06:12 27 4
gpt4 key购买 nike

我在前端有一个 react 表单,用户可以在其中提交他们想问的问题。将表单数据发送到flask server,使用一些NLP模型计算得到结果。然后将结果返回给前端。

问题是:我可以看到发布到 Flask 服务器的数据,但是当我尝试从 Flask 服务器获取结果时,结果为空。

这是前端 QuestionForm.js 中的 handleSubmit 方法:

// post data to flask
axios.post('http://localhost:5000/api/newquestion', this.state)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})

QuestionResult.js 中的 componentDidMount() 方法:

class QuestionResult extends Component {
constructor() {
super();
this.state = {
questionResult: ''
}
}

componentDidMount() {
axios.post('http://localhost:5000/api/newquestion')
.then(response => {
console.log(response)
this.setState({questionResult: response.data})
})
.catch(error => {
console.log(error);
})
}

render() {
const {questionResult} = this.state

return (
<div>
<h1>{questionResult}</h1>
</div>
)
}
}

flask 端点(它只是一个测试模型,我现在正试图返回问题本身):

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/api/newquestion", methods=['GET', 'POST'])
def get_user_question():
if request.method == 'POST':
user_question = request.get_json()
print(user_question)
return jsonify(user_question)

app.run(port=5000, debug=True)

这是我从 python 控制台得到的:

127.0.0.1 - - [20/Nov/2019 23:01:12] "OPTIONS /api/newquestion HTTP/1.1" 200 -
None
127.0.0.1 - - [20/Nov/2019 23:01:12] "GET /api/newquestion HTTP/1.1" 200 -
{'question': 'aaaa'}
127.0.0.1 - - [20/Nov/2019 23:01:13] "POST /api/newquestion HTTP/1.1" 200

但是,当我导入另一个函数 test.py 时:

def hello():
return "hi there!"

并将端点更改为:

@app.route("/api/newquestion", methods=['GET', 'POST'])
def get_user_question():
return hello()

我可以看到消息“你好!”成功呈现在我的 React 页面上。

最佳答案

由于 CORS,您没有收到服务器响应政策。简而言之,默认情况下,浏览器不允许向任何与您的页面具有不同端口、协议(protocol)或域的地址发出 ajax 请求,除非服务器通过添加特定响应 header 允许。

在您的情况下,您的 React 应用程序无法与运行在不同端口上的 flask 服务器通信,但您可以对 flask 配置进行一些更改以允许跨源请求。有一些软件包可用于此,例如https://enable-cors.org/server_flask.html

关于javascript - 从 Flask 后端 react axios GET 空数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58967066/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com