Webpack开发服务器React内容安全策略错误

Question

我已经在webpack-dev-server上运行我的单页应用程序。 我可以在localhost:8080上加载和重新加载我的入口路由，并且每次都可以正常工作。 但是，我只能通过应用程序内的链接加载localhost:8080/accounts/login，即每当我从浏览器刷新按钮重新加载localhost:8080/accounts/login时，我会得到

Cannot GET /accounts/login/

作为服务器响应，在控制台上我得到：

内容安全策略：页面的设置阻止了资源在 self (“default-src http://localhost:8080”) 的加载。来源： ;(function installGlobalHook(window) { ....

这是我的单页应用程序index.html上的CSP头

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

我也没有在我的webpack.config.json上使用任何devtool。我错过了什么。

- dave-oo

---

看起来该文档正在使用Content-Security-Policy头部进行服务，该头部指定了一个比default-src http://localhost:8080更严格的策略。如果指定了多个CSP策略，则更为严格的策略始终会覆盖较为宽松的策略。您可以通过在另一个地方指定更宽松的CSP策略（例如meta元素）来覆盖在某个地方（例如HTTP头）指定的严格CSP策略。 - sideshowbarker

我和你遇到了完全相同的问题。尽管有sideshowbarkers的评论，我仍然不太明白如何解决这个问题。你能否给我提供一个有用的链接或更详细地解释一下你的解决方案，指引我朝正确的方向前进？ - patsimm

Answer 1

如果您在项目中使用Webpack，请在Webpack配置文件中添加output.publicPath = '/'和devServer.historyApiFallback = true。

更多信息：React-router urls don't work when refreshing or writting manually。

- RalfZ

---

我认为你引用了已经回答的其他问题的答案，正确的是：devServer: { historyApiFallback: true, contentBase: './' }。 - David Ferreira

Answer 2

如果您正在使用Rails和Webpacker并遇到此错误，请注意初始化程序config/initializers/content_security_policy.rb具有适用于Rails.env.development的内容安全策略。将该行上的:https更改为:http可解决我的错误。（请记住，就CSP而言，localhost与127.0.0.1不同。）

- bjnord

Answer 3

在 webpack.config.js 中添加 output: { ..., publicPath: "/", } 和 devServer: { historyApiFallback: true } 即可解决问题。

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main.js",
    publicPath: "/", // ++ 
  },
  target: "web",
  devServer: {
    port: "6060",
    static: ["./public"],
    open: true,
    hot: true,
    liveReload: true,
    historyApiFallback: true, // ++
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      // CSS rules
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

- vedanth bora

Answer 4

我花了几个小时来解决这个问题。只需要添加一些简单的代码即可解决。只需按照下面的说明操作即可。如果你遇到从特定URL浏览到另一个URL的问题，你也可以解决它。如果你想要从Webpack配置文件进行配置，请写下面的代码。

devServer: {
    historyApiFallback: true
}

如果您想通过命令行运行，则可以使用以下代码。

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

这对我有用。我不需要做任何其他事情来修复这个问题，比如元标签或其他什么。

- Saroar Hossain Shahan

Answer 5

我遇到了类似的问题。不得不从webpack.config.js中的devServer配置中删除contentBase行。

这是我的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' }
    ]
  }
};

- croraf