Axios Post request from my react app to the express server giving error 500

Asked
Active3 hr before
Viewed126 times

8 Answers

serverexpresserrorrequestaxiosreact
90%

In the catch block, the error which will always be 500 internal server error,Feb 2021. Wasted 2 hours on this. Not much help on this famous library on internet., 1 still valid thanks!. spent all morning trying to solve this! Once i checked error correctly i found a solution in 5 mins. – trig79 Mar 5 at 13:01

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

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;
   },
};
load more v
88%

I setup a basic demo, where I create a POST request and server returns 500 error. With postman I get response, but axios doesn't return response. https://jsfiddle.net/8r3dh6hw/61/,Response from Postman: 500 Internal Server Error, The text was updated successfully, but these errors were encountered:

}).catch(error => {
   console.log(error.message);
})
load more v
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Select the API request that is failing with 500 Internal Server Error in the trace.,In the Trace tool, select the API request that has failed with 500 Internal Server Error.,500 Internal Server Error - BadPath

{
   "fault": {
      "detail": {
         "errorcode": "steps.servicecallout.ExecutionFailed"
      },
      "faultstring": "Execution of ServiceCallout service_callout_v3_store_by_lat_lon
      failed.Reason: ResponseCode 404 is treated as error "
   }
}
}
load more v
40%

Axios interceptors documentation,Not too complicated, right? Intercepting responses can be just as simple.,Interceptors are a feature that allows an application to intercept requests or responses before they are handled by the .then() or the .catch().

axios.interceptors.request.use(function(successfulReq) {
   ...modify code;
   return successfulReq;
}, function(error) {
   ...
   return Promise.reject(error);
});
load more v
22%

We are all set with our node, express server along with mongoDB database.,Build Node Server With Express and MongoDB,Now, we will use the Axios with React app to make the Axios POST request and send the user data to the MongoDB server.

npx create - react - app react - axios - tutorial

To run the React app, run the following command:

npm start

Run below command to install Bootstrap 4 UI library in React app.

npm install bootstrap--save

Add bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="App">
      <h2>React Axios Demo</h2>
    </div>
  );
}

export default App;
load more v
60%

Proxy /api requests to http://www.example.org,Node.js proxying made simple. Configure proxy middleware with ease for connect, express, browser-sync and many more.,Proxy middleware configuration.

// javascript

const express = require('express');
const {
   createProxyMiddleware
} = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({
   target: 'http://www.example.org',
   changeOrigin: true
}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
load more v

Other "server-express" queries related to "Axios Post request from my react app to the express server giving error 500"