解决 html2canvas CORS 跨域问题 – 博客更新(一百一十)

1235°C 19-07-2022 notbyai
最近更新于:2022-10-10 13:59:46

文章摘要moonshot-v1-8k

Standby API Responsing..

重新开启子域名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

其他

流程:首先需要在 nginx 中配置 Access-Control-Allow-Origin 跨域访问,之后在 html2canvas 中配置 useCORS:true 开启跨域,最后在需要跨域的图片 src 属性后添加任意参数(如 ?fixed_cors 不可随机参数,可能造成 cdn 缓存击穿),至于是否需要在跨域图片上添加 crossorigin="anonymous" 属性需要自行尝试。


评论留言

既来之则留之~ 欢迎在下方留言评论,提交评论后还可以撤销或重新编辑。(Valine 会自动保存您的评论信息到浏览器)