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

IT技术 reactjs webpack webpack-dev-server content-security-policy
2021-05-14 20:42:29

我的单页应用程序在 webpack-dev-server 上运行。我可以加载和重新加载我的进入路线，localhost:8080并且每次都有效。但是，我localhost:8080/accounts/login只能通过应用程序内的链接加载localhost:8080/accounts/login，即每当我从浏览器刷新按钮重新加载时

Cannot GET /accounts/login/

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

内容安全策略：页面的设置阻止了加载自身资源（“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'">

我也没有devtool在我的webpack.config.json. 我错过了什么。

4个回答

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

更多信息：React-router url 在手动刷新或写入时不起作用

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

devServer: {
    historyApiFallback: true
}

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

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

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

如果您正在使用 Rails 和 Webpacker 并收到此错误，请注意初始化程序config/initializers/content_security_policy.rb具有Rails.env.development. 更改:https为:http在那条线上解决了我的错误。（请记住，就 CSP 而言，localhost 与 127.0.0.1 不同。）

我有类似的问题。不得不删除contentBase从线devServer在构造webpack.config.js。

这是我的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' }
    ]
  }
};
其它你可能感兴趣的问题
上一篇下沉粗糙的底层 下一篇排序 react-native FlatList