我正在测试react路由器和我创建了 2 个虚拟组件。
主路径工作正常，但是当我尝试转到 /second 路径时，出现以下错误:
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.
第一个组件
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>
最佳答案
尝试在 webpack.config 中添加“historyApiFallback: true”。它对我有用。
devServer: {
historyApiFallback: true,
stats: options.stats,
hot: true,
contentBase: './dist',
watchOptions: {
ignored: /node_modules/
}
}
关于reactjs - React 路由器 - 内容安全策略指令 : "default-src ' self'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51393337/