起因
最近登录我的gpt镜像网站后,发现关于面具的图片资源都失效了
CoCo-AI
于是紧急使用 F12 排查原因
发现所有图片拿出来都已经无法访问了。看来是资源出了问题
在网上一番搜索后发现是 cdn.staticfile.org 失效导致的,而该静态资源属于七牛云,可能问题太多,引起了一些人对七牛云技术的抱怨,“4天都解决不了,七牛云技术这么差的吗?”
网上一堆抱怨之后,七牛云也没有给出解释
这个问题在的12月11日就有人在 staticfile 的 github 仓库的 issue 中提出了:
相关的 issue 地址是:https://github.com/staticfile/static/issues/662
该问题已经是大范围发生的,很多用户都说图标寄了,有些用户可能不懂 CORS,还以为被黑了,😂
CDN缓存错误缓存了CORS响应头
我们从头说起,先说下 https://staticfile.org/,它是七牛云提供的免费服务,该服务尽可能全面收录优秀的开源库,并免费为之提供 CDN 加速服务,使之有更好的访问速度和稳定的环境。
所以我们为了主题使用者能够有更好的响应速度,以及节约服务器的带宽,我们把主题所用到的静态资源都切换成 staticfile.org 的已 CDN 加速的资源,但是由于 staticfile.org 最近「CDN缓存错误缓存了CORS响应头」,特别是由于额外多缓存了 allow-origin,导致其他域名无法跨域请求字体资源了。
老实说这个问题其实要解决的非常快,估计只需要去七牛云的 staticfile 仓库改下配置,改一下静态文件的 Header 头就好。奈何官方似乎无意维护改项目了
所以我们只能切换到其他cdn去了
切换cdn公共库
其实截止到今天,已经快一月了,前面我简单试着解决一下,看起来是好了,但是后面又不行,看来这个项目真的可能凉了。😓
那怎么办呢?我查了一下其实 staticfile 是同步国外的 CDNJS,而国内提供同样同步 CDNJS 这类的开源库资源的服务还有多家的,我收集了一下有:
- Bootstrap 中文网提供的 BootCDN:https://cdn.bootcdn.net/ajax/libs
- cloudflare 的 CDNJS 加速服务:https://cdnjs.cloudflare.com/ajax/libs
- 360前端公共库:https://lib.baomitu.com
自有cdn方案
需要有一个图床加cdn,比如你的是腾讯云oos
- 资源copy:手动copy或者可以通过配置 同步回源 ,先访问一遍,将资源自动copy
- 修改cdn
解决方案
export function getEmojiUrl(unified: string, style: EmojiStyle) {
// return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
return `https://cdnjs.cloudflare.com/ajax/libs/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
}