Log showed it was redirected successfully, but actually it wasn't?

I’m using historyApiFallback with my express server which serves a React-App in the ‘static’ folder. And the express server only provides APIs for the React App.

I just enabled history api fallback

...
app.use(express.static(path.join(__dirname,'static')))
app.use(historyApiFallback({ verbose: true}))
app.use(bodyParser.urlencoded({ extended: true }))
app.use(apiRoutes)
...

something like this.

It’s normal if i request “http://localhost:port”, the React-App is loaded, but it i request something else, the result is shown as the picture above.

how could it happen?

[bripkens]

You need to place the historyApiFallback before the express.static handler. Also, the history API fallback only redirects internally, i.e. this is not visible to the user. Does this help?

[chimurai]

Hi @maximedupre, @bripkens

“http-proxy-middleware” also mutates the same request.url property. But in a slightly different way:

req.url = req.originalUrl; (http-proxy-middleware source)

This explains the difference in behavior… (basically ignores/overwrites the rewritten url)

Reason for this, is so you can mount is differently in express:

// example A (not applicable for Browser-Sync)
app.use('/api', proxy({target: 'http://localhost:5000'}));

// example B
app.use(proxy('/api', {target: 'http://localhost:5000'}));

Feel free to create a ticket if you think this behavior is implemented incorrectly. https://github.com/chimurai/http-proxy-middleware/issues