后端的Axios发布请求参数未定义 [英] Axios post request parameters to backend are undefined

问题描述

我正在创建一个简单的ReactJs，并且创建了一个Searchbar组件，当用户在搜索栏中键入内容时，该组件会执行发布请求.这是执行调用的函数:

I'm creating a simple ReactJs and I created a Searchbar component that does a post request when the user types something into the searchbar. This is the function that does the call:

const searchApi = searchTerm => 
axios.post('http://localhost:3000/findMovie', {
headers: {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': '*'
},
params: searchTerm
});

，它在onChange函数中被调用，如下所示:

and it is being called in the onChange function like this:

handleInput = async (ev) => {
const value = ev.target.value;
const resultsBody = await searchApi(ev.target.value);

这就是我在server.js文件中所做的事情:

and this is what I do in my server.js file:

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显示一个空对象.

I expected the console.log in the backend to show me the request parameters so that I can later do my api call to the external api and return the results, but the console.log show an empty object.

我对此很陌生，但是我不应该为这样的事情做一个职位要求吗?我也尝试过使用get请求进行同样的操作，但是也没有用.

I'm quite new to this but shouldn't I do a post request for something like this? I also tried the same with a get request but it also didn't work.

推荐答案

您的问题是由axios和express之间的命名混乱引起的. axios中的params属性在网址中作为搜索参数发送.

Your problem is caused by naming confusion between axios and express. params property in axios is sent as search parameters in the url.

在明确的url中，搜索参数可通过query属性而不是params获得.因此，请尝试以下操作:

In express url search parameters are available through query property, not params. So, try this:

app.post('/findMovie', (req, res) => {
  console.log('request:', req.query);
})

像/users/:userId/edit一样，快速请求对象上的

params属性引用命名的路由参数.

params property on an express request object refers to named route parameters, as in /users/:userId/edit.

有关快速文档的更多信息: https://expressjs.com/zh_CN/guide/routing.html#route-parameters

More on that in express docs: https://expressjs.com/en/guide/routing.html#route-parameters

更新

此外，为了使axios.post方法正常工作，您需要稍微更改一下调用.它期望发布数据成为第二个参数.由于您没有在正文中发送任何数据，因此可以提供一个空对象:

Also, in order for the axios.post method to work properly, you need to change your call a little bit. It expects the post data a second argument. Since you're not sending any data in the body, you can provide an empty object:

const searchApi = searchTerm => 

    axios.post('http://localhost:3000/findMovie', {} /* <-- this guy */, {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    },
    params: searchTerm
  });

没有它，您的配置对象被错误地视为发布数据.

Without it, your config object is wrongfully treated as post data.

这篇关于后端的Axios发布请求参数未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！