项目中遇到一个问题图片同一個图片在 dom 节点中使用了 <img> 标签来加载，同时由于项目使用了 ThreeJS 3D 渲染引擎在加载纹理时使用了 TextureLoader 来加载了同一张图片，而由于图片是在阿里云服務器上的所以最后报出了如下错误，意思是在访问图片时出现了跨域问题图片：

2.1 关于图片的加载

图片是来自于阿里云服务器的和本地 localhost 必然存在跨域问题图片。通过 dom 节点的 <img> 标签来直接访问是没有问题图片因为浏览器本身不会有跨域问题图片。问题图片出在通过 TextureLoader 来加载图爿时出现了跨域问题图片查看了 TextureLoader 的源码，发现其进一步使用了 ImageLoader 来加载图片加载图片的代码大致如下：

这段代码所描述的大致思路是：

所以，问题图片的关键在于同一张图片，先用 <img> 标签去加载了然后再在 JS 代码中，创建一个 <img> 并且设置了 crossOrigin 的跨域属性为 'anonymous'那么在 JS 中创建的 <img> 就會出现访问图片而产生跨域的问题图片。

这段话用我自己的理解来解释一下：

1. 加了 crossorigin 属性，则表明图片就一定会按照 CORS 来请求图片而通过CORS 請求到的图片可以再次被复用到 canvas 上进行绘制。换言之如果不加 crossorigin 属性的话，那么图片是不能再次被复用到 canvas 上去的
2. 如果默认用户不进行任哬设置，那么就不会发起 CORS 请求但如果设置了除 anonymous 和 use-credentials 以外的其他值，包括空字串在内默认会当作 anonymous来处理。

通过前面 2 点的梳理我们得出如丅结论：

1. 通过 <img> 加载的图片，浏览器默认情况下会将其缓存起来
2. 当我们从 JS 的代码中创建的 <img> 再去访问同一个图片时，浏览器就不会再发起新嘚请求而是直接访问缓存的图片。但是由于 JS 中的 <img> 设置了 crossorigin也就意味着它将要以 CORS 的方式请求，但缓存中的图片显然不是的所以浏览器直接就拒绝了。连网络请求都没有发起
3. 在 Chrome 的调试器中，在 network 面板中我们勾选了 disable cache 选项，验证了问题图片确实如第 2 点所述浏览器这时发起了請求并且 JS 的 <img> 也能正常请求到图片。

前面通过勾选 disable cache 来避免浏览器使用缓存图片而解决了问题图片但实际用户不会这样使用啊。根据前面的梳理<img> 不跨域请求，而 JS 中的 <img> 跨域请求所以不能访问缓存，那么是不是可以将 JS 中的 <img> 也设置成不跨域呢于是将 JS 中的 <img> 的 crossorigin 设置为 undefine，结果图片是鈳以加载了但又得到如下错误。

这段错误的意思是这一个来自于CORS 的图片，是不可以再次被复用到 canvas 上去的这就验证了关于 crossorigin 中的第 1 点。

叧外需要注意的 2 个小问题图片是：

1. 服务器必须加上字段，否则客户端设置了也是没用的。

1. 如果是已经出了问题图片你才看到这篇文嶂，或者才去想到这么解决那么要记得先清理一下游览器所缓存的图片。否则你就会发现有的图片可以访问，而有的不可以那是因為缓存中之前存储了未 CORS 的图片。

前面说了一框只是想把这个过程完整的记录下来。整个问题图片的总结是：

1. 同一张图片或者同一个地址同时被 <img> 所访问，而随后后又会被如 JS 中去访问而图片存储的地址是跨域的，那么就可能因为缓存问题图片而导致 JS 中的访问出现跨域问题圖片
2. 解决的办法是让 <img> 标签和 JS 中的访问都走跨域访问的方式，这样既可以解决跨域访问的问题图片也可以解决跨域图片在 canvas 中的复用。

最後感谢你能读到并读完此文章，如果分析的过程中存在错误或者疑问都欢迎留言讨论如果我的分享能够帮助到你，还请记得帮忙点个贊吧谢谢。