React Router - 内容安全策略指令:"default-src 'self' [英] React Router - Content Security Policy directive: "default-src 'self'
问题描述
我正在测试 react 路由器和我创建了 2 个虚拟组件.主路径工作正常，但是当我尝试转到 /second 路径时，出现以下错误:
拒绝执行内联脚本，因为它违反了以下内容内容安全策略指令:default-src 'self'".无论是'unsafe-inline' 关键字，一个散列('sha256-GBZpdGedoBaq6YBC2+5oO7Dc8WC1XJ5EUI5Md05Lls8=')，或随机数('nonce-...') 是启用内联执行所必需的.还要注意的是'script-src' 未明确设置，因此 'default-src' 用作回退.
第一个组件
import React, { Component} from 'react'从'react-dom' 导入 ReactDOMconst First = () =>(<div>你好 1</div>);导出默认优先；第二个组件
import React, { Component} from 'react'从'react-dom' 导入 ReactDOMconst Second = () =>(<div>你好 2</div>);导出默认秒；和布局组件
import React, { Component} from 'react';从 'react-dom' 导入 ReactDOM；进口 {BrowserRouter 作为路由器，路线，关联来自'反应路由器-dom'从'./first.js'导入第一个；从'./second.js'导入第二个；类布局扩展组件{构造函数(){极好的()this.state = {};}使成为(){返回 (<路由器><div><路由精确路径="/" component={First}/><Route path="/about" component={Second}/></路由器>);}}const app = document.getElementById('app')ReactDOM.render(<Layout/>, app)
HTML 头
<meta charset="utf-8"><title>测试</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">尝试在 webpack.config 中添加historyApiFallback: true".它对我有用.
devServer: {historyApiFallback: 真,统计信息:options.stats，热:真的，contentBase: './dist',手表选项:{忽略:/node_modules/}}I'm testing out react router and I created 2 dummy components.
The home path works fine, but when I try to go to the /second path, it gives the following error:
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.
The first component
import React, { Component} from 'react'
import ReactDOM from 'react-dom'
const First = () => (<div>Hello 1</div>);
export default First;
The second component
import React, { Component} from 'react'
import ReactDOM from 'react-dom'
const Second = () => (<div>Hello 2</div>);
export default Second;
And the Layout component
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
<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>
Try to add "historyApiFallback: true" in your webpack.config. It worked for me.
devServer: {
historyApiFallback: true,
stats: options.stats,
hot: true,
contentBase: './dist',
watchOptions: {
ignored: /node_modules/
}
}
这篇关于React Router - 内容安全策略指令:"default-src 'self'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
