[英]Axios post request parameters to backend are undefined
我正在创建一个简单的ReactJs,并创建了一个Searchbar组件,当用户在搜索栏中键入内容时,该组件会执行发布请求。 这是执行调用的函数:
const searchApi = searchTerm =>
axios.post('http://localhost:3000/findMovie', {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
params: searchTerm
});
它在onChange函数中像这样被调用:
handleInput = async (ev) => {
const value = ev.target.value;
const resultsBody = await searchApi(ev.target.value);
这就是我在server.js
文件中所做的:
app.post('/findMovie', (req, res) => {
console.log('request:', req.params);
// axios.get('http://www.omdbapi.com/?apikey='+
// process.env.OMDB_API_KEY + '&s=' +)
})
我希望后端中的console.log
向我显示请求参数,以便以后可以对外部api进行api调用并返回结果,但是console.log
显示一个空对象。
我对此很陌生,但是我不应该对这样的事情发出职位要求吗? 我也尝试过使用get请求进行同样的操作,但是也没有用。
您的问题是由axios和express之间的命名混乱引起的。 axios中的params
属性在URL中作为搜索参数发送。
在快速url中,搜索参数可通过query
属性而不是params
。 因此,请尝试以下操作:
app.post('/findMovie', (req, res) => {
console.log('request:', req.query);
})
快速请求对象上的params
属性引用命名的路由参数,如/users/:userId/edit
。
快速文档中的更多信息: https : //expressjs.com/en/guide/routing.html#route-parameters
更新
另外,为了使axios.post
方法正常工作,您需要稍微更改一下调用。 它期望发布数据成为第二个参数。 由于您没有在正文中发送任何数据,因此可以提供一个空对象:
const searchApi = searchTerm =>
axios.post('http://localhost:3000/findMovie', {} /* <-- this guy */, {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
params: searchTerm
});
没有它,您的配置对象将被错误地视为发布数据。
尝试这样的axios函数,将params
属性设置为一个对象:
const searchApi = searchTerm =>
axios.post('http://localhost:3000/findMovie', {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
params: { searchTerm }
});
在服务器上,您需要使用req.query
:
app.post('/findMovie', (req, res) => {
console.log('request:', req.query);
})
您应该可以将参数获取为req.query.searchTerm
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.