使用Helmet时出现"NotSameOriginAfterDefaultedToSameOriginByCoep"错误

Question

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

 net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

我该怎么办？

- Evan Hahn

Answer 1

简而言之：在Helmet v5中，禁用默认启用的Cross-Origin-Embedder-Policy头部。

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

---

Helmet v5将 Cross-Origin-Embedder-Policy HTTP响应头设置为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上是可以的，这可能解释了为什么事情只会在生产中出现问题。

- Evan Hahn

Answer 2

建议的解决方案在我的情况下不起作用，然后经过一番搜索，我找到了一个使用头盔配置的解决方案，如下：

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

- Aadil Shaikh