Axios POST请求失败，错误状态码为500：内部服务器错误

Question

我正在尝试通过Axios在体内使用用户名和密码发送POST请求。

我正在http://127.0.0.1:5000/login上部署Flask应用程序，该应用程序处理/ login路由。POST请求失败，并出现以下错误

POST http://127.0.0.1:5000/login 500 (INTERNAL SERVER ERROR)
Error: Request failed with status code 500
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

我进行了一些研究，认为可能是CORS的问题，但事实并非如此，因为我尝试了Axios GET请求，并且工作正常（响应记录正确）。这是我的代码的一部分

axios.get("http://127.0.0.1:5000").then(function(response) {
        console.log(response);
      }).catch(function(error) {
        console.log(error);
      })
axios.post("http://127.0.0.1:5000/login", {
        username: this.state.username,
        password: this.state.password
      }).then(function(response) {
        console.log(response);
      }).catch(function(error) {
        console.log(error);
      })

查看Chrome DevTools，我可以看到POST请求有效负载已正确填充。然后，我尝试使用以下代码在Flask应用程序中打印出服务器端的密钥，但是我什么也没空。（由于POST请求失败，这是预期的）

dict = request.form
    for key in dict:
        print('form key '+dict[key])

但是，将Postman与相应的键和值一起使用会正常工作，并返回响应并打印出键（请参见上文）。失败来自哪里？为什么当GET正常工作时POST请求失败？

Answer 1

2021 年 2 月。在这上面浪费了 2 个小时。对这个著名的互联网图书馆帮助不大。

解决方案：

• 在 catch 块中，error这将始终是500 internal server error
• 所以，使用error.response.data代替error。

代码：

try {
  let result = await axios.post(          // any call like get
    "http://localhost:3001/user",         // your URL
    {                                     // data if post, put
      some: "data",
    }
  );
  console.log(result.response.data);
} catch (error) {
  console.error(error.response.data);     // NOTE - use "error.response.data` (not "error")
}

更新：

我最终编写了一个用于处理错误的通用函数：

文件：common.app.js

export const errorUtils = {
  getError: (error) => {
    let e = error;
    if (error.response) {
      e = error.response.data;                   // data, status, headers
      if (error.response.data && error.response.data.error) {
        e = error.response.data.error;           // my app specific keys override
      }
    } else if (error.message) {
      e = error.message;
    } else {
      e = "Unknown error occured";
    }
    return e;
  },
};

更多信息：https : //github.com/axios/axios#handling-errors

Answer 2

所以我也陷入了同样的问题，我发现的解决方案是这样的：

let data = JSON.stringify({
  username: this.state.username,
  password: password
});

const response = axios.post(url,data,{headers:{"Content-Type" : "application/json"}});

这个解决方案对我有用。

Answer 3

显然 Axios 对原始 JSON 对象并不友好

{username: this.state.username, password: password} 

但将数据传递到 FormData 对象似乎工作得很好！