Webpack dev server React Content Security Policy error

问题:

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.

回答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

回答2:

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' }     ]   } }; 

文章来源: Webpack dev server React Content Security Policy error