报错的内容如下

Access to image at 'http://localhost:9011/upload/pressImg/1611030791331-b1y3ei.png' from origin 'http://192.168.0.102:3002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我是canvas 里面的 toDataURL()的这个方法导致报错的

报错分析： 跨域。浏览器是接收到了数据，但是同源策略给阻止了。

我后台使用的是 node + express ，所以首先定位问题所在，图片是属于静态资源的，然后我们后台解析静态资源使用 express 里面的 static 中间件。所以打开对应的文档，查看对应的配置。

最后express static 中间件的加一个配置：

 setHeaders: function (res, path, stat) {
        res.set("Access-Control-Allow-Origin","*") // 这个地方需要注意，设置为 * 是不合理的，应该要维护一个可以访问的请求源列表。但是我是开发环境，所以实现功能即可
    }

效果，获取到结果了。

最后，本人在业余的时间，实现了一个图片操作的小网站，完全开源，用于学习，前端使用的是 vue3 后端是node ，有兴趣的可以下载下来看看。地址