反应路由器“内容安全策略指令”错误答案

【问题标题】：React Router "Content Security Policy directive" error反应路由器“内容安全策略指令”错误
【发布时间】：2018-12-30 23:51:37
【问题描述】：

尝试学习 React Router，尝试路由登录页面时遇到阻塞。我猜可能是：

Webpack 配置中的问题
跳过了一些元标记
需要更改 Windows 主机文件中的域
package.json 中的依赖问题

一般信息：所有操作都在本地执行。没有服务器或自定义域。只是经典的 localhost:3000。

重现步骤： 手动添加 /login 到http://localhost:3000

错误：

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-GBZpdGedoBaq6YBC2+5oO7Dc8WC1XJ5EUI5Md05Lls8='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

屏幕： login page error

更多可见性是 github 存储库 - Project link

Webpack.config.js：

var webpack = require('webpack');
var path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
    watch: true,
    module: {
    rules: [
        {
          use: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/
        },
        {
            test: /\.scss$/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        },
        {
            test: /\.(png|jp?g|gif|svg)$/,
            use: [
                {
                    loader: "url-loader",
                    options: { limit: 40000}
                },
                'image-webpack-loader'
            ]
        }]

    },

    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            historyApiFallback: true,
            files: ['./dist/*.html'],
            server: { baseDir: ['dist'] }
        })
    ]

};

App.js

import React from "react";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";

import Home from './components/Home/Home';
import Login from './components/Login/Login';

export default () => (

    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login}/>
        </Switch>
    </BrowserRouter>

);

Login.js：

import React, {Component} from 'react';

import './Login.scss'

class Login extends React.Component {

    render() {
        return(
            <div className="container2">
                <h1>Login Page</h1>
            </div>
        )


    }
}

export default Login;

package.json：

{
  "name": "upstar_music",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --progress --colors",
    "start": "webpack && npm run dev"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "faker": "^3.1.0",
    "lodash": "^4.17.2",
    "react": "15.4.1",
    "react-dom": "15.4.1",
    "react-input-range": "^0.9.2",
    "react-redux": "^4.4.6",
    "react-router": "^3.0.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.6.0",
    "redux-form": "^6.3.2",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.1.4",
    "babel-preset-react": "^6.16.0",
    "browser-sync": "^2.24.5",
    "browser-sync-webpack-plugin": "^2.2.2",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "image-webpack-loader": "^4.3.1",
    "node-fetch": "^2.1.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.13.1",
    "url-loader": "^1.0.1",
    "webpack": "2.2.0-rc.0",
    "webpack-dev-server": "^2.11.2"
  }
}

Index.js：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '../style/style.scss';


ReactDOM.render(<App />, document.getElementById('root'));

【问题讨论】：

标签： javascript reactjs webpack react-router frontend

【解决方案1】：

内容安全政策 (CSP) 违反规定仅仅是因为 CSP 不允许在 Script src 中使用 unsafe-inline。对于 React，简单地添加哈希 (SHA) 可能不起作用，因为 React 只需加载脚本 (DOM) 一次，当您导航到其他页面时，React 只会向您抛出“Sha-...”。您可能会研究的另一种方法是提供动态随机数的随机数。你也许可以从这些人提到的https://stackoverflow.com/a/49890126/2875928

【讨论】：

【解决方案2】：

我也遇到了同样的问题，如果你使用 webpack，只需向 modules.exports 添加一个名为 devServer 的新密钥

devServer:{ historyApiFallback: true }

与 devServer 共享我的 webpack 配置以供参考 my working webpack configuration

对于生产，如果您使用的是 nginx，您可以为所有请求配置服务器相同的 html，路径由客户端的 react 处理。

【讨论】：