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 会返回结果.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 属性作为 url 中的搜索参数发送.

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

通过 query 属性，而不是 params 可以使用 express url 搜索参数.所以，试试这个:

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);
})

快速请求对象上的

params 属性指的是命名路由参数，如 /users/:userId/edit 中所示.

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

更多关于 express 文档的内容:https://expressjs.com/en/guide/routing.html#route-parameters

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

更新

此外，为了使 axios.post 方法正常工作，您需要稍微更改您的调用.它期望 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屋！