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

小编典典

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

reactjs

我正在测试React
Router，并创建了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>

阅读 2901

2020-07-22

共1个答案

小编典典

尝试在webpack.config中添加“ historyApiFallback：true”。它为我工作。

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

2020-07-22