优雅的解决跨域问题

本贴最后更新于 1876 天前,其中的信息可能已经时移俗易

0、浏览器跨域问题

看到浏览器报 Access-Control-Allow-Origin 毫无疑问了,看来是跨域问题

1580188963844.png

CORS 是一种访问机制,英文全称是 Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到 Access-Control-Allow-Origin 即可

浏览器端:发送 AJAX 请求前需设置通信对象 XHR 的 withCredentials 属性为 true。

服务器端:设置 Access-Control-Allow-Credentials 为 true。

两个条件缺一不可,否则即使服务器同意发送 Cookie!

Access-Control-Allow-Methods 表示允许哪些跨域请求的提交方式。(例如 GET/POST)

Access-Control-Allow-Headers 表示跨域请求的头部的允许范围。

Access-Control-Expose-Headers 表示允许暴露哪些头部信息给客户端。

Access-Control-Max-Age 表示预检请求的最大缓存时间。

1、返回新的 CorsFilter

这是一种全局跨域的方式

在任意配置类,返回一个新的 CorsFilter Bean,并添加映射路径和具体的 CORS 配置信息。

package edu.xpu.cors.config; @Configuration public class GlobalCorsConfig { @Bean public CorsFilter corsFilter() { //1.添加CORS配置信息 CorsConfiguration config = new CorsConfiguration(); //放行哪些原始域 config.addAllowedOrigin("*"); //是否发送Cookie信息 config.setAllowCredentials(true); //放行哪些原始域(请求方式) config.addAllowedMethod("*"); //放行哪些原始域(头部信息) config.addAllowedHeader("*"); //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息) config.addExposedHeader("*"); //2.添加映射路径 UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource(); configSource.registerCorsConfiguration("/**", config); //3.返回新的CorsFilter. return new CorsFilter(configSource); } }

2、重写 WebMvcConfigurer

在任意配置类,返回一个新的 WebMvcConfigurer Bean,并重写其提供的跨域请求处理的接口,目的是添加映射路径和具体的 CORS 配置信息。

package edu.xpu.cors.config; @Configuration public class GlobalCorsConfig { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override //重写父类提供的跨域请求处理的接口 public void addCorsMappings(CorsRegistry registry) { //添加映射路径 registry.addMapping("/**") //放行哪些原始域 .allowedOrigins("*") //是否发送Cookie信息 .allowCredentials(true) //放行哪些原始域(请求方式) .allowedMethods("GET","POST", "PUT", "DELETE") //放行哪些原始域(头部信息) .allowedHeaders("*") //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息) .exposedHeaders("Header1", "Header2"); } }; } }

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...