HTML页面使用<img>标签无法加载Instagram CDN图片怎么办

• 核心原因是Instagram/Facebook的CDN（fbcdn.net域名）默认开启防盗链校验：CDN节点收到图片请求时会校验请求头里的Referer字段，如果请求来源不是Instagram官方域名，会直接返回403状态码，拒绝返回图片内容，这是第三方平台防止资源被恶意盗用的常规防护手段。
• 你使用的图片URL本身带有时效性签名参数：URL中oe、oh开头的参数是CDN生成的临时访问签名，你当前持有的链接对应的签名过期时间是2022年，早已超过有效期，哪怕绕过防盗链校验，CDN也不会返回过期签名对应的资源。
• 额外注意：如果你是在JavaScript代码、而非HTML标签属性中直接赋值这段URL，URL里的&是HTML转义后的&符号，未做反转义的话会导致URL参数解析错误，也会造成加载失败。

• 最稳定的方案：将目标图片下载到自有服务器/本地存储资源池，直接引用自有域名下的图片地址。该方案完全不受第三方平台防盗链规则、链接过期的影响，是生产环境的首选方案。
• 临时测试方案：给img标签添加不发送Referer的策略属性，同时替换为最新抓取的、未过期的Instagram图片CDN链接，示例代码如下：

<body>
  <img 
    src="替换为最新未过期的Instagram图片CDN链接"
    referrerpolicy="no-referrer"
    alt="展示图片"
  >
</body>

该方案仅适合临时测试使用，Instagram的CDN临时链接有效期通常只有几小时到几天，过期后需要重新替换链接才能正常展示。

• 动态展示方案：搭建自有服务端代理层，由服务端模拟Instagram官方页面的请求特征（携带合法的User-Agent、Referer头）拉取对应图片资源，再将图片内容返回给前端。该方案可以绕过前端直接请求的防盗链限制，如果需要长期动态拉取Instagram图片，还需要配套实现链接定期更新、资源缓存的逻辑。

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