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 對象似乎工作得很好！

Answer 4

大多數情況下，這是因為使用了錯誤的內容類型 header 。

打開郵遞員並查看“正文”選項卡。 在那里您可以找到帖子數據的內容類型。 它也可以從“標題”選項卡訪問。 應該有一個Content-Type標頭。 您通過 POST 請求發送的正確data格式取決於Content-Type標頭。 例如，json 內容類型需要一個 json（javascript 對象）數據或 form-data 內容類型需要一個 FormData。

要在 axios 中設置標題，請像這樣更改代碼：

axios.post("http://127.0.0.1:5000/login", {
        username: this.state.username,
        password: this.state.password
      }, {
        headers: {'Content-Type': 'application/json'}
      }).then(function(response) {
        console.log(response);
      }).catch(function(error) {
        console.log(error);
      })

Answer 5

工作了兩個小時后，我意識到我在身體和數據上犯了一個錯誤。 所以，在 axios 中確保你像這樣傳遞數據。

async function loadToken(){
  try{
    response = await axios({
      url: ``, 
      headers: {
        'Authorization': '',
        'Content-Type': '',
      },
      data: '',
      method: 'POST'
    });
    let data = response.data;
    return {
      tokenInfo:data,
      timestamp:new Date().getTime()
    }
  } catch(err) {
    console.log("err->", err.response.data)
    return res.status(500).send({ret_code: ReturnCodes.SOMETHING_WENT_WRONG});
  } 
}

我之前的代碼是這樣傳數據的，這是錯誤的

async function refreshToken(){
  try{
      let headers = {
        authorization: '',
        'Content-Type': ''
      }
      let url =  ``
      let body = {
        grant_type: '',
        refresh_token: global.tokenInfo.refresh_token
      }
      data = await axios.post(url, body, {headers});
      let data = response.data
      console.log(data)
      return {
        tokenInfo:data,
        timestamp:new Date().getTime()
      }
  } catch(err) {
      console.log("err->", err.response)
      return res.status(500).send({ret_code: ReturnCodes.SOMETHING_WENT_WRONG});
  }
}

只需嘗試我的第一個代碼，希望能解決您的問題。

Answer 6

我有類似的錯誤我有 JSON 資本，它應該是小寫的