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

Question

我是反应和烧瓶API系统的新手。我创建了一个网站，允许用户通过搜索栏进行搜索。我希望能够通过POST请求将查询从React搜索栏发送到FlaskAPI。但是，我得到一个空字符串或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

回答如下：获取烧瓶请求中收到的数据

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

ImmutableMultiDict（[（“我在搜索栏中键入的内容”，”）

然而，在webconsole中，我得到：

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。因此，我认为这不是一个问题。

Answer 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。