一、排查原因：请求没有携带Referer#

打开OpenList网盘页面，进入开发者工具在Network中刷新页面，找到加载失败的图片请求。

查看响应信息，发现返回的是403 Forbidden，第一反应就是OSS防盗链拦截了请求。

但有点奇怪，我明明已经把自己的子域名加入了白名单，按理说不应该被拦截才对。

继续检查请求头，发现问题所在：请求里根本没有Referer字段。

而我的OSS防盗链设置恰好是不允许空Referer访问，所以请求直接被拒绝了。

接着检查OpenList页面，发现HTML的头部有这样一行配置：

1
<meta name="referrer" content="same-origin">

问题就出在这里。

虽然网盘和图床都属于同一个主域zwfpro.com，但它们并不是同一个Origin（源）。same-origin策略只会在同源请求中发送Referer，跨子域请求则不会携带。

所以，即使OSS白名单配置正确，还是会因为请求没有Referer而返回403。

二、尝试方案一：在自定义头部添加meta标签（无效）#

既然找到了原因，第一个想到的就是OpenList后台自带的「自定义头部」功能。

于是直接添加了新的Referer策略：

1
<meta name="referrer" content="strict-origin-when-cross-origin">

保存后刷新页面，图片依旧加载失败。

重新检查页面，发现原来的same-origin和新添加的策略同时存在，并没有替换掉原来的标签。

看来这个方法行不通，继续折腾。

三、尝试方案二：通过自定义内容注入JavaScript（无效）#

后台还有一个「自定义内容」功能，可以插入HTML和JavaScript。于是又尝试通过脚本修改原来的标签：

1
<script>
2
(function () {
3
  var meta = document.querySelector('meta[name="referrer"]');
4
  if (meta) {
5
    meta.setAttribute('content', 'strict-origin-when-cross-origin');
6
  }
7
})();
8
</script>

思路很简单：找到原来的meta标签，直接修改它的content属性。

但实际测试后，图片还是403。问题在于，这种方式无法保证脚本执行时图片请求还没有发出，单纯修改标签也不能保证首次请求就使用新的策略。

连续试了两种方法都没成功，只能换个思路。

四、最终方案：使用外置前端资源#

难道只能修改OpenList前端源码，再重新编译整个二进制文件？

其实没必要这么麻烦，查看OpenList官方文档后，发现可以通过data/config.json中的dist_dir配置指定前端资源目录。也就是说，可以单独修改前端文件，让OpenList加载修改后的资源，不需要重新编译后端。

1
./openlist version

1
/openlist安装目录/
2
├── openlist
3
└── data/
4
    ├── config.json
5
    └── dist/
6
        ├── index.html
7
        └── 其他前端资源

1
<meta name="referrer" content="same-origin" />

1
<meta name="referrer" content="strict-origin-when-cross-origin" />

1
"dist_dir": ""

1
"dist_dir": "/openlist安装目录/data/dist"

1
systemctl restart openlist

1
<meta name="referrer" content="same-origin" />

1
<meta name="referrer" content="strict-origin-when-cross-origin" />

1
Referer: https://img.xxx.com/

最后#

这次问题其实不复杂，根源就是same-origin策略导致跨子域图片请求没有携带Referer。

前面两种方法没成功，主要是因为追加标签并不能替换原有策略，而注入脚本又存在执行时机的问题。最后通过dist_dir使用外置前端资源，只修改一个HTML标签就解决了，不用动后端二进制文件。

如果以后升级OpenList，需要留意前后端版本是否匹配，以及外置前端资源是否需要同步更新。

如果不再需要外置前端，也可以将dist_dir恢复为空字符串，让程序使用内置资源。