React Router - Content Security Policy directive: "default-src 'self'

Question

I\'m testing out react router and I created 2 dummy components. The home path works fine, but when I try to go to the /second path, it gives the following erro

Answer 1

Try to add "historyApiFallback: true" in your webpack.config. It worked for me.

devServer: {
    historyApiFallback: true,
    stats: options.stats,
    hot: true,
    contentBase: './dist',
    watchOptions: {
      ignored: /node_modules/
    }
  }

Answer 2

I solve the error by changing the imported COM's name because I use the WebRTCChane and the WebRTC, this two COM has a similar name, after changing it, I successfully compile.

Answer 3

I added "--history-api-fallback" to my package.json run scripts

{ "start": "webpack-dev-server --mode development --open --history-api-fallback --hot" }

Answer 4

You could modify the meta tag in your index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; 
connect-src * ws://* wss://*; style-src * 'unsafe-inline' 'unsafe-eval'; media-src * ; 
img-src * data:; font-src * ; script-src * 'unsafe-inline' 'unsafe-eval';" />`