canvas绘制网络图片或阿里云oss图片存在跨域问题

    在非同源网站下使用canvas绘制图片网络图片或oss图片时，我们无法避免的就是会看到这样的报错：

has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

或者也会遇到如下错误：

    那我们的解决方法是什么呢？我们要根据自己实际开发场景来找到对应解决方法。根据个人总结一共有三种场景希望大家可以根据以下的方式去逐一排查。

    首先前端必须要做的就是给img设置跨域代码如下：

 

剩下的就都是后端的事情了，要让后端逐一检查是否有符合以下三条中的情况，并作出对应的修改，如果你是前端又不想转述那请直接把这条博客甩给后端：

（一）网络图片仅存在于服务器

    这种解决方法是最简单的，如果你是前端就让后端去设置允许跨域请求的地址。如果你是后端那更简单了就是告诉自己在自己项目里设置允许跨域。如何设置我就不在这里赘述了。

（二）网络图片并非来自服务器比如存在阿里云的oss

    需要登录阿里云的账号按照文档操作设置get请求允许跨域具体操作不做阐述，请阅读阿里云设置oss允许跨域的文档吧。

    在这里特别强调一下要确保你的oss没有上cdn加速，如果存在配置了cdn加速请操作完该条继续看第三条。

（三）网络图片并非来自服务器比如存在阿里云的oss并且配置了cdn加速

    确保第二条已成功操作，然后到cdn控制台配置允许跨域的头，具体操作就不阐述，请阅读cdn配置允许跨域文档。

至此可以解决我们所遇到的所又遇到canvas绘制网络图片出现跨域问题。

    我们知其然还要知其所以然，前两条配置跨域我们都懂，但cdn配置跨域是为什么呢？这里就得说说cdn了，过多的就不细说明，想多了解的请看一文看懂CDN加速原理。如果我们的图片存在的是oss并且配置了cdn，当我们只配置oss跨域未配置cdn就会出现时好时坏的现象，其实就是cdn在作怪了。当我们把cdn取消绑定是就可以了，但又想用cdn那没办法只能配置cdn跨域。这是很多人会忽略的，导致我们走了许多的弯路。

    感谢各位阅读，欢迎留言评论！