Axios POST request fails with error status code 500: Internal Server error

Question

I'm trying to send a POST request locally with a username and password in the body through Axios.

I'm deploying a Flask app on http://127.0.0.1:5000/login, which handles the /login route. The POST request fails with the following error

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) 

I researched a bit and thought it might be a problem with CORS, but this doesn't seem to be the case because I tried an Axios GET request and it worked fine (response logged properly). Here's part of my code

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);       }) 

Looking at Chrome DevTools, I can see that the POST request payload is properly populated. I then tried printing out the keys server-side in the Flask app using the following code, but I got nothing, empty. (which was expected since the POST request failed)

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

HOWEVER using Postman with the corresponding keys and values works properly and returns a response and prints out the keys (see above). Where is the failure coming from? Why would the POST request fail when a GET seems to work just fine?

Answer 1

Feb 2021. Wasted 2 hours on this. Not much help on this famous library on internet.

Solution:

• In the catch block, the error which will always be 500 internal server error
• so, use error.response.data instead of error.

Code:

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") } 

---

Update:

I ended up writing a common function for handing error:

File: 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;   }, }; 

More info: https://github.com/axios/axios#handling-errors

Answer 2

So I also got stuck in the same problem and the solution that I found was something like this :

let data = JSON.stringify({   username: this.state.username,   password: password });  const response = axios.post(url,data,{headers:{"Content-Type" : "application/json"}}); 

This solution worked for me.