你的图片可能是这样被CORB“拦截”的

问题

最近学习一个uniapp+nodejs的项目，前端写了这样一个标签

<image :src="info.imgUrl" ></image>

按理说不应该有什么问题，但运行在 Chrome 后图片却加载不出来，打开控制台看到被CORB策略拦截了，详细信息：

Cross-Origin Read Blocking (CORB) 已屏蔽 MIME 类型为 application/json 的跨域响应
http://localhost:3000/privateImg/xxxxx.bmp。
如需了解详情，请参阅 https://www.chromestatus.com/feature/5629709824032768。

之前最多也就是看到过跨域引起CORS策略的拦截，还没见识过CORB是什么，于是就查阅了资料：

• 什么是CORB？
  
  全称为Cross-Origin Read Blocking（跨源读取阻塞），是一种判断是否要在跨站资源数据到达页面之前阻断其到达当前站点进程中的算法，降低了敏感数据暴露的风险。
• 为什么会产生CORB？
  
  跨域标签 <script> 和 <img> 等请求回来的数据 MIME type （比较常见的有application/javascript、application/json等）与跨域标签应有的 MIME 类型不匹配时，浏览器会启动 CORB 保护数据不被泄漏，被保护的数据类型只有 html、xml 和 json。

这时我看到参考文章中关于 内容嗅探技术（MIME sniffing）的介绍，被屏蔽图片的 MIME Type 是 application/json，于是认为浏览器把 MIME Type 推测错了，因此去给服务器的响应添加了首部X-Content-Type-Options: nosniff用来告知浏览器停止内容嗅探，果不其然还是不行。

思路在误区渐行渐远 -> 想着图片被拦截了去关闭CORB策略就该好了，然后用了几种办法都关不掉（可能是新版 Chrome 已经不允许关闭了）。

解决

这个拦截的出现，实际上是因为 image 标签请求的图片资源，后端并没有找到，返回了一个 application/json 类型的 json 反馈信息，于是自然而然被CORS策略拦截了。

重新调整后端的静态资源路由后，问题就解决了。

（没有进行接口测试吃的亏）

参考资料：https://juejin.cn/post/6844903831373889550