我是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
遵循此答案：获取Flask请求中收到的数据
我尝试了所有这些，但是我总是在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。因此，我认为这不是问题。
您可以尝试以下操作：
反应
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的原因。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句