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

逃离我推掉我的手 2024-03-31 09:08 83阅读 0赞

#### 文章目录 ####

*   *  CORS跨域
     *  解决方案

本博客环境背景：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);
        }
    }

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