问题情景再现
问题起因是,页面的图片资源地址切换为bos服务,在测试的时候发现,原有图片编辑功能在请求bos图片资源的时候,浏览器提示资源跨域了,具体报错方式如下:
遇到这个问题,首先想到的是CORS配置的问题,但是我们的OP老师确认了服务器CORS规则配置,是允许跨域的。部分配置如下:
那么.. 问题到底是出现在哪里?
我精简了一下项目中代码逻辑,如下:
这个逻辑在canvas处理跨域图片时,是比较普遍的处理方式,况且在切换图片资源地址之前,功能都是正常使用的。
如果上述逻辑不添加 crossOrigin: anonymous属性时,是可以正常加载的,但是canvas需要加载允许跨域的资源。
最后,将crossOrigin改为location.origin问题得以解决。(为何bos域名如此特殊?bos对接方给出一个答复是,“产品就是这样设置的”,我:“........”,还有一个就是mac电脑无法复现跨域的问题,windows电脑稳定复现,大大的歧视,小小的疑惑~)
但是我个人是比较推荐处理跨域资源时使用如下方式:
