Question

我在heroku上部署了一个react / express应用，当转到here时，出现此错误'拒绝加载图像'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://*" />

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

Answer 1

我遇到了同样的问题，这与path.resolve有关。我在文件顶部添加了这个：

const path = require('path')

，此后它就起作用了。

Answer 2

对该问题的更一般的答案是按如下方式检查终端中的heroku日志：

heroku logs -n 500

（选择要记录的行数）或

heroku logs --tail

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

在该处，您将看到导致应用无法正确呈现的确切错误。

部署React / Express应用后出现内容安全策略错误

2 个答案: