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

Answer 2

I struggled a couple hours to fix this issue. There is a just simple code that you have to add. Just follow the instruction of below. If you face problem to browse from specific url to another url, you will be able to fix that also. If you would like to configure from webpack config file, then write below's code.

devServer: {
    historyApiFallback: true
}

And If you would like to run by cli command, then use the below's code.

"start": "webpack-dev-server --history-api-fallback"

It worked for me. I had not to do anything else to fix this issue like meta tag or something else.

Answer 3

I had similar issue. Had to remove the contentBase line from devServer configuration in webpack.config.js.

This is my webpack.config.js:

var path = require("path");

module.exports = {
  devtool: 'inline-source-map',
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/assets/",
    filename: "bundle.js"
  },
  devServer: {
    port: 9002
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  }
};