重新开启子域名cdn加速访问图片后,这个生成图文海报的插件又出了之前那个跨域问题,在后端配置了 Access-Control-Allow-Origin
后仍然不能访问(之前不知道是怎么搞的能访问),于是又查了一圈,发现需要给图片添加 crossorigin="anonymous"
属性,试了一下还是不能(此时图片无法访问)然后发现了个新方法:在 src
属性后添加固定字符串参数即可!(实测添加参数后,不添加 crossorigin="anonymous"
也可以正常访问)。在控制台网络中可以看到不携带参数出现cors跨域问题的图片是没有 Access-Control-Allow-Origin
响应头的,其 Referrer Policy
为 stict-origin-when-cross-origin
,原因就是 img 是在缓存数据中读取的,远程访问这个图片的时候没有携带请求头。参考链接:https://www.jianshu.com/p/169f50d95c19
Ps.
流程:首先需要在 nginx 中配置 Access-Control-Allow-Origin 跨域访问,之后在 html2canvas 中配置 useCORS:true 开启跨域,最后在需要跨域的图片 src 属性后添加任意参数(如 ?fixed_cors 不可随机参数,可能造成 cdn 缓存击穿),至于是否需要在跨域图片上添加 crossorigin="anonymous" 属性需要自行尝试。
2022年7月19日 - 跨域