Webpack dev server React Content Security Policy error

Question

I have my single page app running on webpack-dev-server. I can load and reload my entry route over at localhost:8080 and it works every time. However i can load localhost:8080/accounts/login only via a link from within the app i.e whenever i reload localhost:8080/accounts/login from the browser refresh button i get

Cannot GET /accounts/login/

as the server response, and on the console i get

Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://localhost:8080”). Source: ;(function installGlobalHook(window) { ....

This is my CSP header on the single page app's index.html

<meta http-equiv="Content-Security-Policy"
  content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'">

I am also not using any devtool on my webpack.config.json. What am i missing.

Answer 1

If you use Webpack in your project, please add output.publicPath = '/' and devServer.historyApiFallback = true in your webpack config file.

More info: React-router urls don't work when refreshing or writting manually