单独可访问的外部图片嵌入网页报404，referrerPolicy仅硬刷新生效如何解决

一、嵌入图片返回404的根因 #

你遇到的是典型的防盗链限制问题：

• wikia站点对静态资源开启了防盗链校验，会读取请求头的Referer字段，判断请求来源是否为授权域名
• 直接在新标签页打开图片时，请求的Referer为空，符合校验规则可正常返回资源
• 第三方站点嵌入时，默认请求会携带你的站点域名作为Referer，被防盗链策略拦截返回404

二、img标签referrerPolicy仅硬刷新生效的原因 #

普通刷新时浏览器会复用本地缓存的图片资源，该资源对应的历史请求使用的是默认的strict-origin-when-cross-origin策略，不会重新发起请求应用你新增的属性，因此设置不生效。

三、全场景生效的解决方案 #

方案1：全局配置Referrer策略（最简便） #

在页面<head>标签中插入meta标签全局指定Referrer规则，所有请求默认不带Referer：

<meta name="referrer" content="no-referrer">

该配置对全站所有资源生效，无需单独给图片加属性，普通刷新也会遵循该规则。

方案2：单独给第三方图片配置+防缓存 #

如果不想修改全局规则，仅针对这类防盗链图片做处理：

1. 给img标签添加全小写的referrerpolicy属性（HTML标准属性为全小写，驼峰命名可能不识别）
2. 给图片src拼接时间戳/随机数后缀，强制每次请求都不使用本地缓存，确保referrer策略生效

<img 
  v-bind:src="`${e.smallImage}?t=${Date.now()}`" 
  referrerpolicy="no-referrer"
  @mouseover="mouseOver($event,e)" 
  @mouseleave="mouseLeave($event,e)"
>

方案3：后端代理转发（彻底规避限制） #

如果上述方案仍有兼容问题，可以自己搭建后端代理接口：前端请求你的后端接口并传入目标图片地址，后端服务去请求wikia的图片资源，再将资源返回给前端，完全绕开前端跨域和防盗链限制。

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