头盔快递 ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200答案

【问题标题】：Helmet Express ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200头盔快递 ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200
【发布时间】：2022-01-18 08:56:03
【问题描述】：

请我需要帮助，我检查了所有谷歌并没有得到真正的答案来打开我的问题。我想用头盔来保护我的快递服务器。但是当我使用它时，我收到此错误：ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200 用于从我的数据库中加载我的图像。这是我的服务器快递：

// Initialize server
const app = express()
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser());
app.use(cors())
app.use(helmet())

// CORS configuration
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

我正在从我的数据库中获取我的图像，因此 localhost 中的 url 是：http://localhost:3000/image/

当我不使用头盔时，一切正常。

请帮忙

【问题讨论】：

标签： node.js angular express helmet.js cross-origin-resource-policy

【解决方案1】：

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

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

这里是头盔维护者。

头盔将the Cross-Origin-Embedder-Policy HTTP response header 设置为require-corp。

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

<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】：

在谷歌上看了很长时间后，我从这里得到了解决方案： https://github.com/helmetjs/helmet/issues/176 我添加了这一行：

res.setHeader('Cross-Origin-Resource-Policy', 'same-site');

只需刷新和清除缓存（MAC 上的 cmd + R 和其他上的 ctrl+R），它就像一个魅力。谢谢Evan Hahn

【讨论】：

【解决方案3】：

就我而言，我是这样用的

    helmet({
      crossOriginResourcePolicy: false,
    })

问题在于跨域资源策略应该是同一个站点，因为浏览器将其视为另一个源。

【讨论】：

【解决方案4】：

如果版本控制对您来说是一个更好的选择，我在头盔 >=5.0.0 上遇到了同样的问题。掉线到4.6.0 解决了这个错误。

【讨论】：