通过 POST 从 React 获取数据到 Flask [重复]

Posted 2023-02-21

【中文标题】通过 POST 从 React 获取数据到 Flask [重复]

【英文标题】：Get data from React to Flask via POST [duplicate]

【发布时间】：2020-02-09 05:09:39

【问题描述】：

我是 React 和 Flask API 系统的新手。我创建了一个网站，允许用户通过搜索栏进行搜索。 我希望能够通过 POST 请求将查询从 React 搜索栏发送到 Flask API。 但是我得到一个空字符串或 ImmutableDict

反应代码

function handlePostQuery(query)

    if (query != "") 
        axios.post('http://localhost:5000/api/query', query)
            .then(function(response)
                console.log(response);
       //Perform action based on response
        )
        .catch(function(error)
            console.log(error);
       //Perform action based on error
        );
     else 
        alert("The search query cannot be empty")
    

烧瓶代码

@app.route('/api/query', methods = ['POST'])
def get_query_from_react():
    data = request.form
    print(data)
    return data

按照这个答案： Get the data received in a Flask request

我尝试了所有这些，但我总是（在 Flask 中）得到一个空字符串，除非我使用 request.form 它返回给我类似的东西：

ImmutableMultiDict([('what I type in the searchbar', '')])

但是在网络控制台中我得到：

config: url: "http://localhost:5000/api/query", method: "post", data: "what I type in the search", headers: …, transformRequest: Array(1), …
    data: what I type in the search: ""
    headers: content-length: "38", content-type: "application/json"
    request: XMLHttpRequest readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …
    status: 200
    statusText: "OK"
    __proto__: Object

我假设 axios 已经从 React 返回了一个 JSON。所以我认为这不是问题。

【参考方案1】：

您可以尝试以下方法：

反应

function handlePostQuery(query)

    var myParams = 
        data: query
    

    if (query != "") 
        axios.post('http://localhost:5000/api/query', myParams)
            .then(function(response)
                console.log(response);
       //Perform action based on response
        )
        .catch(function(error)
            console.log(error);
       //Perform action based on error
        );
     else 
        alert("The search query cannot be empty")
    

烧瓶

@app.route('/api/query', methods = ['POST'])
def get_query_from_react():
    data = request.get_json()
    print(data)
    return data

我认为问题在于 Axios 没有正确读取 JSON。这就是我创建 myParams 字典并传递给 Axios 的原因。