如何在我的 React SPA 中访问路由组件，同时保持正确的 CSP？

Posted 2023-03-15

【中文标题】如何在我的 React SPA 中访问路由组件，同时保持正确的 CSP？

【英文标题】：How can I reach routed components within my React SPA, while maintaining proper CSP?

【发布时间】：2021-10-23 10:12:52

【问题描述】：

我无法通过在地址栏中键入它们来手动导航到我的 react-router-dom 路由（例如：localhost:8080/notfound）。但是，我可以通过实例化的 RRD 链接到达所需的位置。

相反，我收到“内容安全政策：页面的设置阻止了内联资源的加载（“default-src”）。”

我正在使用从头开始配置构建的功能正常的 React 应用程序。也就是说，我没有使用 create-react-app 及其样板配置。 Here 是我的个人样板..

我目前的理解是：我需要正确实施 CSP。这是我在元标记中包含的一些参数...

http-equiv="内容安全策略"

content="script-src 'self' 'unsafe-inline' 'unsafe-eval'"

还有其他与此主题相关的问题。但是，它们要么解决加载外部站点的问题，要么主动阻止脚本的加载（这似乎与我的担忧相反）。

一个类似的问题提供了一个答案，它使用 react-helmet 来利用 rel='canonical' 和 href 指向索引的链接。这可能是解决方案，但我还没有证明。

非常感谢。

【问题讨论】：

如果您无法通过在地址栏中键入它们来手动导航到我的 react-router-dom 路由 - 不是 CSP 问题，而是路由器配置问题。关闭 CSP，调试路由器，然后您就可以配置 CSP。很难同时调试两个问题。

或许这个话题能帮到你React-router urls don't work when refreshing or writing manually

【参考方案1】：

在 webpack.config.js 中，module.exports：

添加devServer: historyApiFallback: true

并将publicPath: '/' 添加到输出对象。

对于客户端渲染，必须建立返回索引或根的路径。这允许 javascript 重新加载，从而为后续导航启用路由。

This文章讲解透彻。