Webflow站点中p5.js加载CMS图片触发CORS错误，window.onerror未触发页面刷新的问题排查

首先，你的自动刷新脚本没触发的核心原因是：window.onerror不会捕获跨域资源加载的错误。浏览器出于安全策略，会过滤这类跨域资源（比如图片）的加载错误——哪怕控制台能看到错误信息，这个全局事件也不会被触发。

一、先搞定自动刷新的正确姿势 #

既然window.onerror不好使，我们可以换两种更精准的方式捕获图片加载错误：

1. 利用p5.js自身的加载错误回调 #

p5的loadImage方法本身就支持传入错误处理函数，直接在这里监听CORS相关的加载失败：

function preload() {
  // 替换成你的Webflow CMS图片URL
  const imgUrl = "https://assets.website-files.com/your-site-id/your-image.jpg";
  
  loadImage(imgUrl, 
    // 加载成功回调
    (img) => {
      // 这里写图片加载后的绘制逻辑
    },
    // 加载失败回调（包括CORS错误）
    (error) => {
      console.log("检测到图片加载错误（大概率是CORS），正在刷新页面...");
      location.reload();
    }
  );
}

如果是用createImg动态创建图片，也可以直接给DOM元素加error事件：

let myImg;
function setup() {
  createCanvas(400, 400);
  myImg = createImg("你的图片URL");
  // 给底层的img元素绑定错误事件
  myImg.elt.onerror = () => {
    console.log("图片加载失败，触发刷新");
    location.reload();
  };
}

2. 全局监听资源加载错误（更通用） #

用window.addEventListener('error')并开启捕获阶段，能捕获到图片这类资源的加载错误：

window.addEventListener('error', (event) => {
  // 只处理图片元素的加载错误
  if (event.target instanceof HTMLImageElement) {
    console.log("图片加载出错，尝试刷新页面");
    // 加个小延迟避免无限刷新
    setTimeout(() => location.reload(), 1000);
  }
}, true); // 这里的true必须加，启用捕获阶段才能拿到资源加载错误

二、从根源解决Webflow的CORS问题（别只靠刷新） #

刷新只是临时缓解，真正解决问题要从CORS本身入手：

• 给图片请求添加crossOrigin属性
  这是最关键的一步，告诉浏览器以匿名方式请求图片，Webflow的CDN默认支持这种跨域请求。在p5里可以这么加：

  // 用loadImage时
  loadImage(imgUrl, successCallback, errorCallback, { crossOrigin: 'anonymous' });
  
  // 用createImg时
  myImg.elt.crossOrigin = 'anonymous';
  

• 确认图片URL的正确性
  确保你用的是Webflow CMS提供的完整绝对路径（比如https://assets.website-files.com/xxx/xxx.jpg），不要用相对路径或者错误的子域名，否则也会触发跨域错误。

• 检查Webflow的CORS配置
  一般来说Webflow会自动给自身资产配置正确的CORS头，但如果是自定义域名的站点，可以检查一下：在Webflow后台的「Settings > Custom Code」里，确认没有额外的CORS限制代码；或者用浏览器的Network面板查看图片请求的响应头，是否包含Access-Control-Allow-Origin: *或者你的站点域名。

总结 #

先尝试添加crossOrigin属性并确认图片URL正确，这应该能解决大部分CORS问题；如果偶尔还是出现加载失败（比如CDN缓存波动），再用上面的错误监听脚本触发自动刷新，比依赖window.onerror靠谱得多。

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