将作品放入 Postman 而不是 AXIOS

Question

这是我的 MERN 应用程序中最奇怪的事情。当我从 Postman 向我的 api 执行 PUT 时，它会工作并更新我的 api 和 mongoDB。在 front-end 上它不会更新 api 即使控制台日志显示正确的值并且 url 是相同的？任何帮助或指导将不胜感激......现在已经玩了好几天了。

邮递员证明更新工作

我的axios的代码如下：

handlePlayerSubmit(id, player) {
    console.log('This is the id: ' + id);
    console.log('This is the player: ' + player);

    let apiUrl = 'http://localhost:3001/api/teams';
    //sends the id and new author/text to our api
    axios.put(`${apiUrl}/${id}`, player).catch(err => {
      console.log(err);
    });

}

所以我知道它是由于控制台日志而触发的...不知道为什么它不更新 api？

而且这不是 console.logging 错误。

开发工具中的网络屏幕截图

HEADERS 来自网络选项卡：

Answer 1

发生这种情况是因为 Axios 将 JavaScript 对象序列化为 JSON。要以 application/x-www-form-urlencoded 格式序列化，您需要使用 techniques described in the Axios documentation 格式之一。

我认为 qs 对您来说是一个不错的解决方案：

let apiUrl = 'http://localhost:3001/api/teams';
//sends the id and new author/text to our api
axios.put(`${apiUrl}/${id}`, qs.stringify(player)).catch(err => {
  console.log(err);
});

Answer 2

Axios 不喜欢发布普通对象。

解决问题的一种方法是 FormData:

let formData = new FormData();
formData.append('param1', 'hi');
formData.append('param2', 'hello');

axios({
    method: 'POST',
    url: '/api/some-endpoint/',
    data: formData
}).then(response => {
    console.log(response);
});

https://github.com/axios/axios/issues/1195

将作品放入 Postman 而不是 AXIOS

Put works in Postman but not AXIOS

javascript

api

reactjs

mern

axios