React proxy does not work even though config is set properly

Question

I have tried multiple things

I added

"proxy": "http://localhost:5000/"

to package.json, and even

devServer: {
    historyApiFallback: true,
     proxy: {
     "/": "http://localhost:5000"
     }
  }

to webpack.config.dev.js

However, none of these seem to work. When I go to localhost:3000/age (one of my routes), the backend does not receive any request even though the React component is tied to it AND I have the proxy set in package.json

My express app listens on route 5000, and I am visiting it through my browser as localhost:3000/age and also have tried localhost:5000/age but don't work

Are you sure localhost:5000/age available on express route.please check it directly on browser url — prasanth
@prasanth I have a react router which loads a component when the path is ‘/age’, but going to that route in my browser says CANNOT GET ‘/age’. I do not have a get request, but my React Router is supposed to load a component — mg nt
please set the route on express .Because you are request on express router.react router is client router. its not performed by the express js — prasanth
But if react has a proxy, then shouldn’t react router use the same route as express? I’ll try and use fetch requests in my React app to use express, instead of react router — mg nt
why type of request you did direct url call or a ajax request for the url localhost:3000/age ? — prasanth

prasanth prasanth · Accepted Answer · 2020-05-17T04:00:09

Check this documentation

The development server will only attempt to send requests without text/html in its Accept header to the proxy.

If you access directly on browser. its set content type header as text/html .So its not working . Better use only for an ajax/fetch request .

issue

for development react have own server.if you need a react side route better try react-router. After the production build its working same as you expect

React proxy does not work even though config is set properly

2 Answers