html - 部署 react/express 应用程序后出现内容安全策略错误

Question

我向 heroku 部署了一个 react/express 应用程序，当转到这里时，我收到此错误“拒绝加载图像” https://nameless-sands-37753.herokuapp.com/favicon.ico，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'img-src' 没有显式设置，因此 'default-src' 用作后备。这是我尝试过的：

• 将此添加到 manifest.json："content_security_policy": "default-src 'self' https://nameless-sands-37753.herokuapp.com/"
• 将此添加到我的 server.js

if (process.env.NODE_ENV === "production") {
  app.use("/voleo/", express.static("client/build"));
  app.use(helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'"],
      imgSrc: ["'self"]
    }
  }))

  app.get("*", (req, res) => {
    res.sendfile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

• 删除了 faveicon.ico

• 添加了这个标签：<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://* 'unsafe-inline'; script-src 'self' https://* 'unsafe-inline' 'unsafe-eval'; img-src 'self' https://*" />

  仍然不确定我做错了什么。建议非常感谢。

标签： htmlcontent-security-policy

Answer 1

该问题的更一般的答案是在终端中检查 heroku 日志，如下所示：

heroku logs -n 500 

（选择要记录的行数）或

heroku logs --tail 

（对于实时日志，但我发现第一个命令更有效）

在那里，您将看到阻止应用程序正确呈现的确切错误。