Angular从API获取图片链接加载时遇403错误的问题求助

嘿，这个问题我之前也碰到过，本质是**防盗链（Hotlinking Protection）**在搞鬼！下面给你拆解原因和解决办法：

为什么会出现这种情况？ #

当你的Angular页面加载图片时，浏览器会自动在请求头里带上Referer字段，值就是你当前网站的地址。而目标图片服务器（ankama.akamaized.net）的防盗链规则会拦截这个带外部Referer的请求，返回403禁止访问。

但你手动点击链接打开图片时，浏览器的Referer头是空的（或者是浏览器自身），服务器认为这是合法的直接访问，就允许加载了。而且浏览器会把这张图片缓存下来，所以你刷新页面时，浏览器直接从本地缓存读取图片，不会再发请求到服务器，自然就能显示了。

你可以去Chrome控制台的Network标签里，对比两种场景下的请求头——页面加载图片时的Referer是你的网站，手动打开链接时Referer不存在，就能验证这个结论。

可行的解决方案 #

1. 后端代理图片请求（最推荐） #

让你的后端服务器充当“中间人”，前端不直接请求目标图片，而是请求自己的后端接口，由后端去获取图片再返回给前端。这样图片请求的Referer是你的后端服务器地址，不会触发对方的防盗链规则。

举个简单的例子：

• 组件里添加一个生成代理地址的方法：

getProxyImageUrl(imgUrl: string): string {
  // 假设你的后端代理接口是 /api/proxy-image，接收url参数
  return `/api/proxy-image?url=${encodeURIComponent(imgUrl)}`;
}

• 修改HTML里的图片src：

<img [src]="getProxyImageUrl(idol.imgUrl)">

然后在你的后端（比如Node.js、Java、Python等）实现这个代理接口，逻辑就是接收url参数，发起HTTP请求获取图片，再把响应原样返回给前端。

2. 申请加入图片服务器的Referer白名单 #

如果图片服务器是你自己维护的，或者能联系到管理员，可以把你的网站域名加入到他们的防盗链白名单中，这样服务器就会允许你的网站直接引用图片资源。

3. 缓存图片到自己的存储服务 #

如果允许的话，你可以提前把需要的图片下载到自己的CDN或者云存储里，然后从自己的域名引用这些图片，彻底绕开对方的防盗链限制。

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