头盔快递 ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

Helmet Express ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

我需要帮助,我检查了所有 google 但没有得到真正的答案来打开我的问题。 我想使用头盔来保护我的快速服务器。但是当我使用它时,我得到这个错误: ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200 for loaded my images from my database. 这是我的服务器快递:

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

我正在从我的数据库中获取图像,所以本地主机中的 url 是:http://localhost:3000/image/

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

请帮忙

仔细研究 google 后,我从这里得到了解决方案: https://github.com/helmetjs/helmet/issues/176 我添加这一行:

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

只需刷新并清除缓存(在 MAC 上使用 cmd + R,在其他设备上使用 ctrl+R),效果非常好。 谢谢Evan Hahn

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

设置此 header 意味着加载 cross-origin 资源(如来自其他资源的图像)更加棘手。例如,像这样加载 cross-origin...

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

...除非 example.com 明确允许,通过设置它自己的一些响应 header,否则将无法工作。您的浏览器将尝试加载 example.com/image.png,如果未明确允许,您的浏览器将放弃响应。

要解决此问题,您可以防止头盔设置 Cross-Origin-Embedder-Policy header,如下所示:

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

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

在我的例子中,我就是这样使用的

    helmet({
      crossOriginResourcePolicy: false,
    })

问题出在 cross-origin 资源策略上,应该是 same-site,因为浏览器将其视为另一个来源。

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

我遇到了同样的问题,已解决:

helmet({
    crossOriginResourcePolicy: false,
})