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

Question

我在 webpack-dev-server 上安装了我的单页应用程序运行。我可以在 localhost:8080 加载和重新加载我的入口路线，它每次都有效。但是我只能通过应用程序内的 link 加载 localhost:8080/accounts/login 即每当我从浏览器刷新按钮重新加载 localhost:8080/accounts/login 我得到

Cannot GET /accounts/login/

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

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

这是我在单页应用 index.html

上的 CSP header

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

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

Answer 1

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

更多信息：

Answer 2

我有类似的问题。必须从 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' }
    ]
  }
};

Answer 3

我花了几个小时才解决这个问题。您必须添加一个简单的代码。只需按照以下说明操作即可。如果您在从特定 url 浏览到另一个 url 时遇到问题，您也可以解决该问题。如果您想从 webpack 配置文件进行配置，请编写以下代码。

devServer: {
    historyApiFallback: true
}

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

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

它对我有用。我不需要做任何其他事情来解决这个问题，比如元标记或其他东西。

Answer 4

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

Answer 5

添加 output: { ..., publicPath: "/", } 和 devServer: { historyApiFallback: true } 有效

在webpack.config.js

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"],
      },
    ],
  },
};

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

Webpack dev server React Content Security Policy error

content-security-policy

reactjs

webpack

webpack-dev-server