为什么HTML无法显示Express服务器返回的图片？

核心问题：Helmet中间件的默认安全头限制 #

你使用的helmet()中间件默认会启用Cross-Origin-Embedder-Policy: require-corp安全头，这个规则会阻止页面嵌入没有跨域许可的跨域资源：

• 直接在浏览器地址栏访问图片链接时，属于浏览器直接请求资源，不属于“嵌入”场景，所以不受该规则限制，能正常显示；
• 用<img>标签从其他页面（比如本地HTML文件、其他域名页面）嵌入图片时，属于跨域资源嵌入行为，触发了这个安全策略，浏览器会拒绝加载图片。

补充检查：路由挂载缺失 #

你的Express代码中定义了router但没有挂载到应用上，缺少类似以下的代码：

// 将router挂载到/upload路径下，对应链接里的/upload前缀
app.use('/upload', router);

如果实际服务器没添加这行代码，直接访问链接也无法生效，你说直接访问能显示，应该是服务器上已经补了这行，但提供的代码里漏写了，建议确认。

解决办法 #

方法1：修改Helmet配置，放宽嵌入限制

调整Helmet的配置，禁用或修改Cross-Origin-Embedder-Policy规则：

app.use(helmet({
  // 完全禁用该规则
  crossOriginEmbedderPolicy: false,
  // 或者设置为"unsafe-none"，允许嵌入无跨域许可的资源
  // crossOriginEmbedderPolicy: { policy: "unsafe-none" },
}));

方法2：给图片资源添加跨域许可头

在返回图片的路由中，添加Cross-Origin-Resource-Policy头，允许跨域嵌入：

router.get('/lookforit/:id',(req, res) =>{
    // 添加允许跨域嵌入的响应头
    res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
    res.sendFile(__dirname+'/public/images/'+req.params.id)
})

内容的提问来源于stack exchange，提问作者E Epsylon