前端Img使用图片跨域问题是怎么引起的？该如何解决呢?

在项目种遇到一个问题，图片在dom节点这种使用了<img>标签来加载可以正常显示，但是运用到style中没有经过标签的加载就会出现跨域的问题

怎么会引起这个问题呢？

1.通过<img> 加载的图片，浏览器默认情况下会将其缓存起来。

2.当我们从 JS 的代码中创建的 <img> 再去访问同一个图片时，浏览器就不会再发起新的请求，而是直接访问缓存的图片。但是由于 JS 中的 <img> 设置了 crossorigin，也就意味着它将要以 CORS 的方式请求，但缓存中的图片显然不是的，所以浏览器直接就拒绝了。连网络请求都没有发起。

3.在 Chrome 的调试器中，在 network 面板中，我们勾选了 disable cache 选项，验证了问题确实如第 2 点所述，浏览器这时发起了请求并且 JS 的 <img> 也能正常请求到图片。

如何解决这个问题？

1.在工作中遇到这个问题的话，就需要你的后端小伙伴在服务器配置一个字段

Access-Control-Allow-Origin: *

如果服务器不配置，客户端怎么操作也是没用的。
2.如果你现在已经遇见这个问题的话，想要怎么解决的话，在解决问题之前记得清楚一些浏览器缓存的图片。

总结

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