Question

我正在创建一个简单的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请求进行同样的操作，但是也没有用。

Answer 1

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

在明确的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
  });

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

Answer 2

尝试这样的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

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

2 个答案: