【解决问题】跨域 图片跨域问题 has been blocked by CORS policy No-Access-Control-Allow-Origin

本博客环境背景：JAVA项目下，前后端联调时候图片出现跨域问题，报错has been blocked by CORS policy No-Access-Control-Allow-Origin的解决方案。

CORS跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制，是对ajax请求的限制，cors对静态资源没有跨域限制。

跨域问题一般情况：
1、域名不同 www.baidu.com 与 www.qq.com
2、端口不同 www.baidu.com:8080 与 www.baidu.com:8081
3、二级域名不同 test.baidu.com 与 other.baidu.com
4、http和https

解决方案

跨域问题其实很常见，可以直接加上CorsConfig配置类即可。浏览器会在请求中携带一些头信息，我们根据此来判断是否允许其跨域，然后在请求头中加入这些信息，可以直接使用过滤器完成。

Access-Control-Allow-Origin：允许哪个域名进行跨域，是一个具体域名或*（代表任意域名）
Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下CORS不会携带cookie，所以要将这个值设为true

相当于同一拦截所有请求，再用CorsFilter实现跨域逻辑，最后返回新的CorsFilter。
CorsFilter是SpringMVC已经封装好的CORS的跨域过滤器，其内部涵盖了http请求中所涉及判定逻辑。

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
		//创建一个可添加CORS配置信息  
        CorsConfiguration config = new CorsConfiguration();
        //允许的域，若使用addAllowedOrigin("*");会导致cookie失效，要将*换成域名
        config.addAllowedOriginPattern("*");
        //是否发送cookie信息
        config.setAllowCredentials(true);
        //允许的请求方式
        config.addAllowedMethod("*");
        //允许的头信息
        config.addAllowedHeader("*");

		//添加映射路径，这儿拦截所有请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(configSource);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

参考：https://zhuanlan.zhihu.com/p/66484450
https://zhuanlan.zhihu.com/p/121042077