我正在测试 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>