解决has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’报错跨域问题

1 问题描述

vue+springboot，将图片放在服务器端，利用html2canvas绘制DOM中的内容，出现跨域问题

试过了添加:

:src="shareUrlContent.getUrlImageUrl+'?'+new Date().getTime()"
crossorigin="anonymous"

不管用；

2 解决办法

往后端添加'Access-Control-Allow-Origin' '*'；

添加注意事项：

先看报错提示

Access to image at 'http://****:9022/images/551-1-(2023-7-28).jpg?1692015834355' from origin 'http://****:9016' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 我的前后端部署到一个服务器上，但是端口不一样，前端9016，后端9018，图片访问的端口也是独立的，为9022（我这个当时有点问题，所以图片没用和后端一样的端口）；

从报错消息看，大致就是跨域，需要添加Access-Control-Allow-Origin；前端端口添加Access-Control-Allow-Origin实在nginx.conf中，而后端端口添加Access-Control-Allow-Origin是在代码中配置代码中加；

而这个项目是图片访问不到，而图片的端口在9022；所以需要对9022这个端口的接口代码中添加，以springboot为例，添加以下全局配置文件：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

//全局跨域处理
@Configuration
public class MyCorsConfig {
    @Bean
    public CorsFilter corsFilter(){
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://localhost:9016"); //这里填写请求的前端服务器
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");

        //2.添加映射路径，拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

需要注意的是，前端端口的地址一定要和vue端口的地址对应。

然后重启就可运行了