Safari中HTML/JavaScript加载跨域网站图片不显示问题

问题复现代码 #

JavaScript 逻辑 #

for (let i = 0; i < 11; i++) {
  Draw_Images(i);
}

function Draw_Images(i) {
  var div = document.createElement('div');
  div.id = "meme" + i;
  div.style.borderRadius = "1%";
  div.style.width = "200px";
  div.style.height = "200px";
  div.style.border = "1px solid";
  div.style.padding = "0";
  div.style.margin = "0";
  var divParent = document.getElementById("memes_container").appendChild(div);
  var img = new Image();
  img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
  img.id = "image_meme" + i;
  img.style.width = "100%";
  img.style.height = "100%";
  img.style.objectFit = "contain";
  img.className = "img-fluid";
  img.alt = i;
  img.crossOrigin = 'anonymous';
  divParent.appendChild(img);
}

HTML 结构 #

<div class="container">
  <div class="row">
    <div class="col-sm">
      <div id="memes_container"></div>
    </div>
  </div>
</div>

故障原因 #

• crossOrigin 属性设置顺序错误：代码先给img.src赋值，后设置img.crossOrigin = 'anonymous'。Safari对跨域资源的CORS校验逻辑比Chrome严格，属性赋值顺序不符合规范会直接触发跨域拦截，甚至抛出JS错误中断后续DOM渲染。
• 图片存储站未配置合法CORS响应头：当img标签带crossOrigin属性发起跨域请求时，目标资源站必须返回匹配的CORS响应头，Safari会直接拦截不符合要求的响应，Chrome在部分场景下会做兼容降级。
• 脚本执行时序问题：如果JS代码在DOM节点渲染完成前执行，document.getElementById("memes_container")会返回null，调用appendChild方法会直接抛出类型错误，中断所有后续逻辑，Safari对这类错误没有容错处理。

修复方案 #

1. 调整属性赋值顺序，crossOrigin必须在src赋值前设置，同时增加错误监听方便定位问题：

function Draw_Images(i) {
  const div = document.createElement('div');
  div.id = "meme" + i;
  div.style.cssText = "border-radius:1%;width:200px;height:200px;border:1px solid;padding:0;margin:0;";
  const divParent = document.getElementById("memes_container").appendChild(div);
  const img = new Image();
  // 先配置CORS属性，再赋值资源地址
  img.crossOrigin = 'anonymous';
  img.id = "image_meme" + i;
  img.style.cssText = "width:100%;height:100%;object-fit:contain;";
  img.className = "img-fluid";
  img.alt = i;
  img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
  img.onerror = () => console.log(`索引为${i}的图片加载失败`);
  divParent.appendChild(img);
}

2. 为图片存储独立站配置CORS响应头，在站点服务配置中添加以下头信息：

Access-Control-Allow-Origin: 你的主站域名
Access-Control-Allow-Methods: GET

如果不需要对图片做canvas导出、像素读取等跨域操作，可以直接删除img.crossOrigin = 'anonymous'这行代码。普通img标签展示跨域图片不需要CORS配置，所有浏览器都不会拦截。

3. 等DOM加载完成后再执行图片渲染逻辑，避免节点不存在导致的报错：

document.addEventListener('DOMContentLoaded', () => {
  for (let i = 0; i < 11; i++) {
    Draw_Images(i);
  }
})

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