一、前言

我们做项目经常会用到第三方的图片，一般都是通过img标签获取展示，通常来讲没啥问题，但不出意外的话，就要出意外了，偶尔来个跨域问题，会让我们前端头皮发麻，怀疑人生。

所以今天我带大家来看看，这个问题的起因和解决方法。

二、综合讲述

1、原因

首先

浏览器自身的安全策略问题，对不同源的文件，进行限制。

其次

<img>标签，在html的部分，是自带跨域属性的，它会将加载到的图片，缓存到浏览器中。那下次

用<img>标签去访问同一张图片的时候，浏览器是会去读取缓存的，而不是向第三方服务器再次发起

图片请求，来获取图片。

本来也没啥问题，少请求一次可以少占点内存，还能加快网页加载速度，岂不美哉。

但下面的场景说它不行了:

我们经常会将获取到的图片进行保存，通常是通过canvas的方式复用保存到本地的，canvas有时候可以

正常显示，但是保存到本地就出问题，原因就是这部分逻辑我们是在js里写的，坏就坏在这里，js里创建的

<img>标签，是不自带跨域属性的，可它同时会默认使用CORS的方式去请求，浏览器一看，这图片缓存里有了，

就直接缓存里丢给他用，但缓存的数据也是第三方的数据，既然跨域，那就默认是不允许通过toDataURL()或者

toBlob()等等导出方式保存的。

2、解决方法

添加crossorigin属性

这个属性的描述是：

上述图片也说了，添加crossOrigin，就能执行跨域请求，通常我们是没有证书的，所以选第一个，

值为anonymous，而在js里我们一般使用new Image()的函数形式，来获取图片

var exampleImg = new Image()
exampleImg.crossOrigin = "anonymous"
exampleImg.src = "图片地址"

一般到这一步就可以解决了。

如果还报跨域问题，建议服务器端，检查检查，是不是没配置一下Access-Control-Allow-Origin，服务器端没配

置，那前端白瞎。

其他诸如404或者其他报错就看实际情况再解决就ok了。

三、小结

总结起来就是，前端请求要跨域，服务器上也要设置跨域，才能实现畅通无阻的访问和利用资源。

ps: 我是地霊殿__三無，今天又水了一篇嘿嘿。