Question

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

Cannot GET /accounts/login/

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

内容安全策略：页面的设置阻止了加载自己的资源（“default-src LINK”）。资源： ;（函数installGlobalHook（window）{....

这是我在单页应用的index.html上的CSP标题

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

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

Answer 1

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

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

Answer 2

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

devServer: {
    historyApiFallback: true
}

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

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

对我有用。我没有做任何其他事情来解决此问题，例如meta标签或其他问题。

Answer 3

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

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

3 个答案: