Webpack react app proxying to express server. Returning the json response from the express server rather than react components - reactjs

Question

I have a react web app that uses express as the back end.
I have it set up so that it proxies the request urls on the react server port (9000), to the express server (3000). Problem is, when I type in the path /examplepath, it returns the json that the express app returns, rather than returning the component that renders from getting that response from the backend. I am getting the express response and looking at it rather than react getting the express response and looking at it and then rendering and showing me that render.
When I click this button, it renders the correct page because it uses this code
componentDidMount() {
axios.post('/', qs.stringify(this.state))
.then(res => {
if (res.data === "session") {
this.setState({session: true})
}
})
}
It will render the page correctly using react
But if I visit the route directly it renders the json response from the express backend.
Like this
When I want it to render like the correcly rendered one using react
devServer: {
port: 9000,
open: true,
proxy: {
'/': 'http://localhost:3000'
}
}
THIS ^ is my webpack.config.js

Answer 1

Try adding historyApiFallback: true to your webpack.config.js file (not sure if the proxy will mess with it -- if so, use express cors middleware on the backend instead):
devServer: {
host: 'localhost',
port: 9000,
quiet: true,
historyApiFallback: true,
},
Also, a more common port setup is: React app on 3000 and API/server on 5000.
In addition, make sure you clearly separate your front and back end routes. Try keeping your back end routes to /api/someurl, and adding that to your proxy (and AJAX requests):
proxy: {
'/api/*': 'http://localhost:3000/api/'
}
Then, all front-end requests will be:
axios.get('/api/someurl').then().catch()
which will resolve to http://localhost:3000/api/someurl. This way, there's no chance of blending the front and back end routes.
Personally, I'd recommend cors over a proxy, because the proxy has been known to cause random connection issues.