MDN页面加载Tenor图片遇CORS拦截：crossOrigin设置及部分GIF异常咨询

先把你执行的脚本贴出来方便参考：

function loadImage(crossOrigin) { 
  const img = new Image(); 
  if(crossOrigin) img.crossOrigin = 'anonymous'; 
  img.src="https://media.tenor.com/images/d5b11025a5f24a73c53adeae124aff72/tenor.gif"; 
} 
loadImage(false); 
loadImage(true);

问题一：设置crossOrigin='anonymous'时图片请求仍被CORS拦截？ #

这其实是个挺常见的误区——前端设置crossOrigin只是告诉浏览器「我要以匿名方式发起跨域请求」，但真正能不能跨域，完全看目标服务器的脸色。

当你给Image对象加上crossOrigin='anonymous'后，浏览器会在请求头里带上Origin字段（也就是你执行脚本的MDN页面地址），同时要求服务器返回对应的CORS响应头，比如Access-Control-Allow-Origin: *（允许任意来源）或者精准匹配你的来源地址。

如果Tenor的图片服务器没配置这些响应头，浏览器就会直接拦截请求——因为服务器明确没同意这个来源的跨域请求，哪怕你前端已经声明了匿名跨域也没用。

反过来，当你调用loadImage(false)时，浏览器不会发送Origin头，属于「无跨域标识的请求」：浏览器会正常加载图片，但如果后续你想把这张图用到Canvas里（比如画出来、读取像素），就会触发「画布污染」问题，无法操作；但单纯加载图片的话，浏览器不会拦截（这是历史遗留的宽松策略）。

问题二：Tenor的GIF部分被CORS拦截，部分不被？ #

这基本是Tenor自身的资源配置差异导致的，常见原因有这几个：

• Tenor的图片可能存在不同的CDN节点或存储集群里，不同节点的CORS配置不一样。有些节点开了允许任意来源跨域的权限，有些则保持默认的严格配置，没开放跨域。
• 热门图片可能因为被大量跨域引用，Tenor针对性开放了CORS权限；而冷门图片就没做这个配置。
• 偶尔也可能是缓存的锅：如果某张图之前你用无跨域标识的方式加载过，浏览器缓存了响应，后续再用crossOrigin='anonymous'请求时，可能直接读缓存跳过了跨域检查，但这种情况比较少见，因为缓存会区分请求头的差异。

说白了，不是你的代码有问题，是Tenor那边对不同资源的跨域权限设置不一致导致的。

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