【解决问题】跨域 图片跨域问题 has been blocked by CORS policy No

【解决问题】跨域 图片跨域问题 has been blocked by CORS policy No

文章目录

• • 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 与 www.qq
2、端口不同 www.baidu:8080 与 www.baidu:8081
3、二级域名不同 test.baidu 与 other.baidu
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 {@Beanpublic CorsFilter corsFilter() {//创建一个可添加CORS配置信息  CorsConfiguration config = new CorsConfiguration();//允许的域，若使用addAllowedOrigin("*");会导致cookie失效，要将*换成域名config.addAllowedOriginPattern("*");//是否发送cookie信息config.setAllowCredentials(true);//允许的请求方式config.addAllowedMethod("*");//允许的头信息config.addAllowedHeader("*");//添加映射路径，这儿拦截所有请求UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();isterCorsConfiguration("/**", config);return new CorsFilter(configSource);}
}

参考：