Параметры почтового запроса Axios к серверу не определены

Question

Я создаю простой ReactJ и создал компонент панели поиска, который отправляет запрос, когда пользователь вводит что-то в панель поиска.Это функция, которая выполняет вызов:

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.jsfile:

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 следующим образом, установите свойство 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

Answer 2

Ваша проблема вызвана путаницей имен между axios и express.Свойство params в axios отправляется в качестве параметров поиска в 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
  });

Без него ваш объект конфигурации ошибочно рассматривается как данные поста.