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

Question

我的应用程序已成功构建，没有任何错误。 但是，当我尝试打开它时，它只显示一个空白页面。 我得到的 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.

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

Answer 1

你找到解决办法了吗？

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

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

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

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

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

Answer 2

对我来说是这样的：

在 server.js 中添加：

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

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

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