使用ShortPixel CDN时WebGL2 texImage2D污染画布问题求助

AI 小北

2026-8-9

可能的原因分析

CDN响应头的实际有效性存疑：虽然你确认CDN配置了access-control-allow-origin: *，但务必通过浏览器开发者工具的「网络」面板，检查CDN图片请求的响应头，确认Access-Control-Allow-Origin确实存在且值正确。CDN的缓存规则可能返回旧的无CORS头的缓存内容，或是代理配置中遗漏了头的传递逻辑。
crossorigin属性添加时机错误：手动在JS执行前修改标签的方式不可靠——如果滑块的动画脚本在你修改标签前就已经触发了图片加载，crossorigin="anonymous"根本不会生效。必须通过WordPress的钩子机制，在插件生成<img>标签时直接注入该属性，确保图片加载前属性已存在。
THREE.js纹理加载未配置CORS：滑块基于THREE.js实现，即使<img>标签加了crossorigin，如果THREE.js加载纹理时未设置对应的CORS选项，依然会污染画布。检查纹理加载代码，确保添加crossOrigin配置：
```
const loader = new THREE.TextureLoader();
loader.setCrossOrigin('anonymous');
const texture = loader.load('你的CDN图片地址');
```
浏览器缓存的旧资源干扰：之前未配置CORS时加载的图片可能已被浏览器缓存，后续即使配置正确，浏览器仍会读取缓存的无CORS资源。可以清除浏览器缓存，或给CDN图片URL添加版本参数（如?v=202405）强制重新请求。
CDN URL结构的特殊限制：你使用的CDN URL是嵌套格式（https://cdn.shortpixel.ai/.../https://worksite.artonice.com/...），部分浏览器或CDN内部逻辑可能对这种嵌套URL的CORS处理有特殊限制。可以查看ShortPixel的配置文档，尝试使用其他URL格式（如仅带源站路径的格式）。