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

文章摘要 AIchatGPT

standby chatGPT 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" 属性需要自行尝试。