Параметры пост-запроса Axios к бэкэнду не определены
Я создаю простой 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.info('request:', req.params);
// axios.get('http://www.omdbapi.com/?apikey='+
// process.env.OMDB_API_KEY + '&s=' +)
})
Я ожидал, что console.info в бэкэнде покажет мне параметры запроса, чтобы я мог позже выполнить вызов api к внешнему API и вернуть результаты, но console.info показывает пустой объект.
Я новичок в этом, но не следует ли мне делать почтовый запрос для чего-то вроде этого? Я также пробовал то же самое с запросом на получение, но это тоже не сработало.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваша проблема вызвана путаницей между аксиомами и экспрессом. Свойство params в axios отправляется как параметры поиска в url-адресе.
В экспресс-поиске по URL-адресам параметры доступны через свойство query, а не через params. Итак, попробуйте это:
app.post('/findMovie', (req, res) => {
console.info('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
});
Без него ваш объект конфигурации неправильно обрабатывается как данные публикации.
Вы можете отправить POST или GET (или любой другой метод, например PUT, DELETE и т. д.) На бэкэнд, это зависит от того, как это делается, например, здесь у вас есть app.post, поэтому он будет работать только для POST, но не стесняйтесь использовать любой метод тебе нужно. Ищите документацию по REST API, где каждое действие соответствует методу.
Я бы придерживался публикации при отправке данных на сервер. Вы все еще можете сделать это с axios.post с небольшими изменениями. Дело в том, что метод post ожидает объект данных как второй аргумент, а config как третий. В вашем примере вы передаете config как второй, поэтому он обрабатывает его как данные. Добавьте пустой объект в качестве второго аргумента, и все будет хорошо.
Хорошо, я разберусь. Вроде работает. Спасибо @GlebKost
Попробуйте использовать свою функцию 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.info('request:', req.query);
})
Вы должны получить параметр как req.query.searchTerm
Я думаю, это не работает с почтовым запросом, я получаю данные, когда меняю его на запрос получения.
Хорошо, теперь я получаю желаемое значение в console.info, но мне пришлось изменить оба значения на получение запроса. Является ли запрос на получение тем, что мне нужно, или это должен быть почтовый запрос, потому что у меня сложилось впечатление, что всякий раз, когда вы отправляете данные на бэкэнд, это должен быть почтовый запрос.