Instagram /?__a=1接口返回的图片URL无法在img标签加载问题

问题原因 #

这是Meta（原Facebook）官方的访问限制机制，其CDN托管的所有图片资源都有防盗链校验+请求上下文绑定规则：你从接口获取的图片URL，是和你请求该接口时的IP、Cookie、User-Agent等客户端信息绑定的，直接放到<img>标签跨域加载、或者更换访问环境都会触发校验失败，返回403错误无法加载。

可用解决方案 #

方案1：删除URL中的签名校验参数 #

接口返回的URL末尾带的oh、oe、_nc_sid、edm、ccb这类字段都是动态签名参数，直接删除所有参数仅保留资源路径即可，示例：
原URL：

https://instagram.fmxp10-1.fna.fbcdn.net/v/t51.2885-19/s150x150/177219615_1728341124004802_3178671336629535217_n.jpg?_nc_ht=instagram.fmxp10-1.fna.fbcdn.net&_nc_ohc=0jrm53_8VuMAX8Wdh4I&edm=AAWvnRQBAAAA&ccb=7-4&oh=0ffa1ac452bacb959adab6ace79283cb&oe=616FB4A3&_nc_sid=e7738c

处理后URL：

https://instagram.fmxp10-1.fna.fbcdn.net/v/t51.2885-19/s150x150/177219615_1728341124004802_3178671336629535217_n.jpg

大部分场景下处理后的URL可以直接加载。

方案2：替换通用CDN域名 #

如果删除参数后依然无法加载，将URL里的地域化CDN域名instagram.fxxx-1.fna.fbcdn.net替换为通用域名scontent.cdninstagram.com即可，示例处理后URL：

https://scontent.cdninstagram.com/v/t51.2885-19/s150x150/177219615_1728341124004802_3178671336629535217_n.jpg

该方案适配90%以上的公开Instagram资源加载场景。

方案3：兜底代理方案 #

如果是服务端采集场景，不要直接把原始URL传给前端加载，你可以用请求/?__a=1接口时相同的请求头（含User-Agent、Cookie）先请求图片资源，转存到自有存储或图床后再提供给前端使用，完全规避防盗链限制。

内容的提问来源于stack exchange，提问作者Federico Motta