图标 sprite 放到 CDN 后整页图标空白,控制台提示 blocked by CORS policy,直接打开 sprite 文件本身能看到图形。乍看像缓存或者权限的锅,追下去往往不是。

add_header Access-Control-Allow-Origin '*';
<svg><use href='/sprite.svg#search'></use></svg>

追下去是这么回事:use 引用外部 SVG 受同源限制,CDN 没给 Access-Control-Allow-Origin 时浏览器拒绝加载。本地同源测试发现不了这个问题。

碰到「SVG sprite 跨域」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。

具体做法是,把 sprite 放回同源目录 或者给 CDN 加跨域头;确认为 sprite 响应带上 Access-Control-Allow-Origin;改完清一次 CDN 缓存 旧响应还会被复用。

验收就看一点,页面图标全部显示,控制台没有跨域报错。

作者 9823189