头盔出现“NotSameOriginAfterDefaultedToSameOriginByCoep”错误答案

【问题标题】：Getting "NotSameOriginAfterDefaultedToSameOriginByCoep" error with Helmet头盔出现“NotSameOriginAfterDefaultedToSameOriginByCoep”错误
【发布时间】：2023-02-12 17:34:43
【问题描述】：

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

 net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

我应该怎么办？

【问题讨论】：

标签： node.js helmet.js cross-origin-embedder-policy

【解决方案1】：

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 中是可能的，但默认情况下它是关闭的，所以大多数人没有使用它。）

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

<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,
    // ...
  })
);

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

【讨论】：

【解决方案2】：

上面的解决方案在我的情况下不起作用，然后在谷歌搜索之后，我找到了一个使用头盔配置的解决方案，如：-

app.use(helmet.crossOriginEmbedderPolicy({ policy: "credentialless" }));

【讨论】：