Question

我正在测试react路由器，并创建了2个虚拟组件。本地路径可以正常工作，但是当我尝试转到/second路径时，会出现以下错误：

拒绝执行内联脚本，因为它违反了以下要求内容安全策略指令：“ default-src'self'”。要么 'unsafe-inline'关键字，一个哈希（'sha256-GBZpdGedoBaq6YBC2 + 5oO7Dc8WC1XJ5EUI5Md05Lls8 ='）或随机数（'nonce -...'）是启用内联执行所必需的。另请注意未明确设置'script-src'，因此将'default-src'用作后备。

第一个组件

import React, { Component} from 'react'
import ReactDOM from 'react-dom'

const First = () => (<div>Hello 1</div>);
export default First;

第二部分

import React, { Component} from 'react'
import ReactDOM from 'react-dom'

const Second = () => (<div>Hello 2</div>);

export default Second;

还有布局组件

import React, { Component} from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import First from './first.js';
import Second from './second.js';

class Layout extends Component {
  constructor () {
    super()
    this.state = {
     };
  }
  render(){
    return (
      <Router>
      <div>
        <Route exact path="/" component={First}/>
        <Route path="/about" component={Second}/>
      </div>
      </Router>
    );
  }
  }

const app = document.getElementById('app')
ReactDOM.render(<Layout />, app)

HTML头

<head>
    <meta charset="utf-8">
    <title>testing</title>
    <meta http-equiv="Content-Security-Policy" content="default-src *; connect-src * ws://* wss://*; style-src * 'unsafe-inline' 'unsafe-eval'; media-src * ; img-src * data:; font-src * ; script-src * 'unsafe-inline' 'unsafe-eval';" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Answer 1

尝试在webpack.config中添加“ historyApiFallback：true”。它对我有用。

devServer: {
    historyApiFallback: true,
    stats: options.stats,
    hot: true,
    contentBase: './dist',
    watchOptions: {
      ignored: /node_modules/
    }
  }

Answer 2

能否在index.html中修改元标记

<meta http-equiv="Content-Security-Policy" content="default-src *; connect-src * ws://* wss://*; style-src * 'unsafe-inline' 'unsafe-eval'; media-src * ; img-src * data:; font-src * ; script-src * 'unsafe-inline' 'unsafe-eval';" />

Answer 3

我通过更改导入的COM名称来解决该错误，因为我使用了WebRTCChane和WebRTC，这两个COM具有相似的名称，更改后，我可以成功编译。

Answer 4

我在package.json运行脚本中添加了“ --history-api-fallback”

{ “ start”：“ webpack-dev-server-模式开发--open --history-api-fallback --hot” }

React Router-内容安全策略指令：“ default-src'self'

4 个答案: