Axios 向后端发布请求参数未定义

IT技术 javascript node.js reactjs axios
2021-05-17 12:23:38

我正在创建一个简单的 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 请求进行了同样的尝试，但也没有奏效。

2个回答

您的问题是由 axios 和 express 之间的命名混淆引起的。paramsaxios 中的属性作为 url 中的搜索参数发送。

在 express url 中，搜索参数可通过query属性获得，而不是params. 所以，试试这个：

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

params快速请求对象上的属性指的是命名路由参数，如/users/:userId/edit.

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

更新

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

其它你可能感兴趣的问题
上一篇将 Webpack HMR 与提升的 Lerna React 项目一起使用 下一篇Reactjs - 谷歌地图 - 样式信息窗口