头盔出现 "NotSameOriginAfterDefaultedToSameOriginByCoep" 错误

Getting "NotSameOriginAfterDefaultedToSameOriginByCoep" error with Helmet

我在使用 Helmet.js 时在浏览器控制台中看到以下错误:

 net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

我该怎么办?

tl;dr:禁用 the Cross-Origin-Embedder-Policy header,在 Helmet v5.

中默认启用
app.use(
  helmet({
    crossOriginEmbedderPolicy: false,
    // ...
  })
);

Helmet v5 将 the Cross-Origin-Embedder-Policy HTTP response header 设置为 require-corp。 (这在 Helmet v4 中是可能的,但默认情况下它是关闭的,所以大多数人没有使用它。)

设置此 header 意味着加载 cross-origin 资源(如来自其他资源的图像)更加棘手。例如,像这样加载 cross-origin...

<img alt="My picture" src="https://example.com/image.png">

...除非 example.com 明确允许,通过设置它自己的一些响应 header,否则将无法工作。您的浏览器将尝试加载 example.com/image.png,如果未明确允许,您的浏览器将放弃响应。

要解决此问题,您可以防止头盔设置 Cross-Origin-Embedder-Policy header,如下所示:

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

我做了 a small sample app 你可以用来玩这个。在我的测试中,它似乎在 HTTP 中不起作用,但它 在 HTTPS 上 起作用,这可能解释了为什么事情只会在生产中中断。