用头盔获取"NotSameOriginAfterDefaultedToSameOriginByCoep“误差

Question

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

 net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

我该怎么办？

Answer 1

tl;dr:禁用 标题，默认情况下在头盔v5.中启用

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

头盔v5将HTTP响应标头设置为require-corp。(这在头盔v4中是可能的，但默认情况下是关闭的，所以大多数人都不使用它。)

设置这个标题意味着加载跨源资源(就像来自另一个资源的图像)要复杂得多。例如，像这样装载一个跨原点.

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

.除非example.com显式地允许它，否则不会工作，方法是设置它自己的一些响应头。您的浏览器将尝试加载example.com/image.png，如果不显式允许，浏览器将删除响应。

要解决这个问题，可以防止头盔设置Cross-Origin-Embedder-Policy头，如下所示：

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

我制作了一个小示例应用程序，你可以用来玩这个。在我的测试中，它似乎不能在HTTP中工作，但是它可以在HTTPS上工作，这可能解释了为什么在生产中事情只会中断。