React 应用程序在部署到 heroku 时不显示任何内容答案

【问题标题】：React app does not display anything when deployed to herokuReact 应用程序在部署到 heroku 时不显示任何内容
【发布时间】：2021-02-11 17:27:13
【问题描述】：

我的应用程序已成功构建，没有任何错误。但是，当我尝试打开它时，它只显示一个空白页面。我得到的 Chrome 开发工具的错误是：

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-eE1k/Cs1U0Li9/ihPPQ7jKIGDvR8fYw65VJw+txfifw='), or a nonce ('nonce-...') is required to enable inline execution.

Refused to load the script 'https://www.google-analytics.com/analytics.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to load the script 'https://www.pagespeed-mod.com/v1/taas?id=cs&ak=32b001198a46647f164402ebaec7a88c&si=d07acaa3a5ff4a4f99b12b98acafe347&tag=1005&rand=elUWG4o247dNBGXBV31uSeN1epHHQ1Qs&ord=4755781515134192' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

我不知道我做错了什么。有人有什么主意吗？谢谢

【问题讨论】：

标签： javascript reactjs heroku

【解决方案1】：

你找到解决办法了吗？

我昨天也遇到了同样的问题，也找到了这个帖子。对我来说，Helmet 导致了这个问题。你在你的快递服务器中使用它吗？

Helmet 4.0 自动将 Content Security Policy 设置为默认的 strict 值，而 Helmet 3.x 以前没有这样做（这就是我昨天更新到 4.0 时遇到这个问题的原因）。

因此，如果您安装了 Helmet，这应该会有所帮助：

app.use(helmet({
  contentSecurityPolicy: false,
}));

更多信息 - https://helmetjs.github.io/

【讨论】：

谢谢。我也从其他 stackoverflow 线程中得到了它。

【解决方案2】：

对我来说是这样的：

在 server.js 中添加：

app.use(
  helmet({
    contentSecurityPolicy: false,
  }),
);

并在 package.json 中添加到脚本中：

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",

【讨论】：