前端图像绘制时跨域问题

1、绘图代码

        通过Image请求服务器图像数据，然后绘制到canvas上，通过在canvas上添加水印，然后显示到新的el-image上。

      let img = new Image();
      img.crossOrigin = "Anonymous";
      img.onload = function () {
        let canvas = document.createElement("canvas");
        let width = picture.width;
        let height = picture.height;
        canvas.width = width;
        canvas.height = height;
        let context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 设置线条的颜色
        context.strokeStyle = "red";
        // 设置线条的宽度
        context.lineWidth = 5;
        context.font = "36px serif";
        context.textBaseline = "top";
        context.fillStyle = "red";
        context.save();
        picture.image = canvas.toDataURL("jpg");
        picture.marks = true;
        loading.value = false;
        showImagePreview.value = true;
        imagePreviewPath.value = picture.image;
      };
      img.onerror = function (e) {
        console.log("error", e);
        loading.value = false;
      };
      img.src = picture.image;

2、前端错误

        在前端调试时，canvas.toDataURL("jpg");代码段会出现错误：

        Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

3、后端代码

@Configuration
public class PostWebMvcConfigurer implements WebMvcConfigurer{
    @Value("${data.folder}") 
	public String dataPath;
	
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/images/**")
		.addResourceLocations("file:"+dataPath+"/images/");//本地路径
	}
}

4、解决方案

@Configuration
public class PostWebMvcConfigurer implements WebMvcConfigurer{
    @Value("${data.folder}") 
	public String dataPath;
	
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/images/**")
		.addResourceLocations("file:"+dataPath+"/images/");//本地路径
	}
	@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/images/**")
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("*");

    }
}