使用头盔时出现“NotSameOriginAfterDefaultedToSameOriginByCoep”错误

Question

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

 net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

我应该怎么办？

Answer 1

tl;dr: 禁用header Cross-Origin-Embedder-Policy，在 Helmet v5 中默认启用。

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

Helmet v5 将HTTPCross-Origin-Embedder-Policy响应标头设置为require-corp. （这在 Helmet v4 中是可能的，但默认情况下它是关闭的，所以大多数人没有使用它。）

设置此标头意味着加载跨域资源（例如来自另一个资源的图像）会更加棘手。例如，加载这样的跨域......

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

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

要解决此问题，您可以阻止 Helmet 设置Cross-Origin-Embedder-Policy标头，如下所示：

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

我制作了一个小示例应用程序，您可以用它来解决这个问题。在我的测试中，它似乎在 HTTP 中不起作用，但在 HTTPS 上却可以，这也许可以解释为什么事情只会在生产中出现问题。