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

问题描述

我在heroku上部署了一个react/express应用，当我访问此处时，我得到了此错误'拒绝加载图像' https://nameless-sands-37753.herokuapp.com/favicon.ico "，因为它违反了以下内容安全政策指令:"default-src'none'".请注意，未明确设置"img-src"，因此将"default-src"用作后备.这是我尝试过的:

I deployed a react/express app to heroku and when going to here I get this error 'Refused to load the image 'https://nameless-sands-37753.herokuapp.com/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.'. Here's what I tried:

• 将此添加到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://*"/>

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

  Still not sure what I'm doing wrong. Advice much appreciated.

  推荐答案

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

  The more general answer to the problem would be to check heroku logs in terminal as follows:

  heroku logs -n 500
  

  (选择要记录的行数)或

  (choose the number of lines to log)OR

  heroku logs --tail
  

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

  (for live logs, but I found the 1st command to be more effective)

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

  In there you will see the exact error that prevents the app from properly rendering.

  这篇关于部署React/Express应用后出现内容安全策略错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！