Question

尝试学习React Router，尝试路由登录页面时获取拦截器。我想可能是：

Webpack配置中的问题
跳过了一些元标记
需要更改Windows Host文件中的域
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'));

Answer 1

内容安全策略（CSP）给出此违规行为仅仅是因为CSP不允许在脚本src中进行不安全的内联。对于React，仅添加哈希（SHA）可能不起作用，因为React只需加载一次脚本（DOM），当您导航到其他页面时，React只会抛出“ Sha -...”。您可能要研究的另一种方法是通过提供动态随机数来随机数。您可能可以从这些人提到的https://stackoverflow.com/a/49890126/2875928

中取得成就

Answer 2

我也面临着同样的问题，如果您使用的是webpack，只需将一个新密钥添加到modules.exports中名为devServer的

devServer:{ historyApiFallback: true }

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

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

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

2 个答案: