传入在线图片URL作为props时触发CORB跨域错误如何解决

别在跨域配置上浪费时间，这个CORB拦截和常规CORS跨域限制没关系，核心问题是你作为props传入的图片URL本身无效：

• 你现在用的Google Drive链接是文件预览的网页地址，服务端返回的内容MIME类型是text/html（也就是普通网页文档），根本不是image/jpeg/image/png这类图片类型
• 浏览器的CORB机制会拦截“把跨源网页当图片/脚本资源加载”的行为，防止恶意内容读取，所以直接把这个响应拦了
• 你读本地存储的图片时，路径指向的是真实的图片二进制文件，返回的MIME类型是正确的图片类型，所以能正常加载

具体报错信息：
Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html，可查阅Chrome CORB相关特性说明了解机制细节。

1. 替换为Google Drive图片直链 #

你当前使用的预览链接格式为https://drive.google.com/file/d/[文件ID]/view?usp=sharing，需要替换为官方提供的直出图片格式：
https://drive.google.com/uc?export=view&id=[文件ID]
操作时把链接中/d/和/view之间的字符串提取出来作为文件ID，填入直链格式的对应位置即可。
注意：需要提前将对应Drive文件的共享权限设置为「任何获得链接的用户可查看」，否则链接仍会返回权限校验的HTML页面，无法正常加载图片。

2. 改用静态资源托管服务存储图片 #

如果不想处理Drive的链接格式问题，可将图片上传到专门的静态资源托管服务、云对象存储服务，获取直接指向图片文件的URL，这类地址默认返回正确的图片MIME类型，不会触发CORB拦截。

3. 链接有效性校验方法 #

拿到图片URL后可先自行校验：在浏览器新标签页打开URL，如果页面仅展示图片本身、无站点导航栏、文件操作菜单等网页元素，右键可直接保存图片，即为有效直链；如果打开后是带操作界面的文件预览页，说明链接指向的是网页而非图片，不能作为图片src属性的值传入组件。

内容的提问来源于stack exchange，提问作者Favour Onyido