反应 axios 从 Flask 后端获取空数据答案

【问题标题】：React axios GET null data from Flask backend反应 axios 从 Flask 后端获取空数据
【发布时间】：2020-03-16 22:07:24
【问题描述】：

我在前端有一个反应表单，用户可以在其中提交他们想问的问题。将表单数据发送到烧瓶服务器，使用一些 NLP 模型进行计算并得到结果。然后将结果返回给前端。

问题是：我可以看到发布到烧瓶服务器的数据，但是当我尝试从烧瓶服务器获取结果时得到空值。

这里是前端 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>
        )
    }
}

烧瓶端点（它只是一个测试模型，我现在正试图返回问题本身）：

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()

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

【问题讨论】：

检查您的 API 上的日志。
您可能需要使用 CORS 进行额外配置：如果有帮助，请参阅stackoverflow.com/q/39550920/1453578 的两个答案

标签： javascript reactjs flask

【解决方案1】：

由于CORS 政策，您没有收到服务器响应。简而言之，默认情况下，浏览器不会让 ajax 请求发送到与您的页面具有不同端口、协议或域的任何地址，除非服务器允许，通过添加某个响应标头。

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

【讨论】：

我确实在烧瓶上启用了 CORS，并且我已经更新了上面的代码。
在那之后你会在控制台中得到什么？您还可以查看浏览器的开发人员工具，以检查页面向您的服务器发出的网络请求。
{data: null, status: 200, statusText: "OK", headers: {…}, config: {…}, …} config: {url: "localhost:5000/api/newquestion", 方法： “post”，标头：{...}，transformRequest：Array(1)，transformResponse：Array(1)，...} 数据：null 标头：{content-type：“application/json”} 请求：XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, ...} status: 200 statusText: "OK" proto: Object
这发生在componentDidMount？您的 API 现在只是返回输入，我在 POST 请求中看不到任何其他输入：
我认为前端试图在发布数据之前获取结果，这就是为什么我得到空值，但我仍然不知道如何修复它。

【解决方案2】：

const config = {
            headers: {'Access-Control-Allow-Origin': '*'}
        };

        axios.post('http://localhost:5000/api/newquestion', this.state, config)
        .then(response => {
            console.log(response)
            this.setState({questionResult: response.data,            isLoaded: true})
        })
        .catch(error => {
            console.log(error)
        })

@app.route("/api/newquestion", methods=['POST'])
@cross_origin(origin='*',headers=['Content-Type'])
def get_user_question():
    data = request.get_json()
    question = data['question']
    result = generate_text(question)
    return jsonify(result)

【讨论】：