canvas绘制网络图片或阿里云oss图片存在跨域问题_canvas 绘图 oss 'access-control-allow-origin' header-优快云博客

本文链接：https://blog.youkuaiyun.com/fetch_all/article/details/105519317

在非同源环境下，使用canvas绘制网络图片或阿里云OSS图片会出现跨域错误。解决方法包括前端设置img跨域、后端允许跨域请求、阿里云OSS设置跨域以及CDN配置允许跨域。文章详细介绍了三种场景的解决方案，特别是涉及CDN时，需注意CDN跨域配置的重要性，以避免绘图时的不稳定现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在非同源网站下使用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请求允许跨域具体操作不做阐述，请阅读