在使用Helmet.js时,我在浏览器控制台中看到以下错误:
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
我该怎么办?
在使用Helmet.js时,我在浏览器控制台中看到以下错误:
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
我该怎么办?
简而言之:在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上是可以的,这可能解释了为什么事情只会在生产中出现问题。
建议的解决方案在我的情况下不起作用,然后经过一番搜索,我找到了一个使用头盔配置的解决方案,如下:
app.use(helmet.crossOriginEmbedderPolicy({ policy: "credentialless" }));