彻底理解什么是跨域以及如何解决跨域

2024-05-30 12:04| 来源: 网络整理| 查看: 265

彻底理解什么是跨域以及如何解决跨域同源策略同源与跨域CORS简介解决跨域1.基于注解驱动2.基于接口编程3.基于过滤器4.基于微服务网关配置

同源策略

浏览器拥有同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。

同源与跨域

同源就是指在同一个域，也就是就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

跨域调用，会出现如下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access. The response had HTTP status code 400. CORS简介

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。

CORS允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服AJAX只能同源使用的限制。

在CORS通信过程，都是浏览器自动完成，CORS通信与同源的AJAX通信没有差别。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求（预请求）。因此，实现CORS通信的关键在于服务器，只要服务器实现了CORS 接口，就可以跨源通信。

解决跨域 1.基于注解驱动使用@CrossOrigin注解，该注解有以下属性: 属性含义value指定所支持域的集合，表示所有域都支持，默认值为。这些值对应HTTP请求头中的Access-Control-Allow-Originorigins同valueallowedHeaders允许请求头中的header，默认都支持exposedHeaders响应头中允许访问的header，默认为空methods支持请求的方法，比如GET，POST，PUT等，默认和Controller中的方法上标注的一致。allowCredentials是否允许cookie随请求发送，使用时必须指定具体的域maxAge预请求的结果的有效期，默认30分钟使用CORS实现跨域，只需添加一个 @CrossOrigin注解，该注解可以标注于方法或者类上。 @CrossOrigin public class testController{ } 2.基于接口编程使用接口编程的方式进行统一配置。创建配置类实现WebMvcConfigurer，重写addCorsMappings默认实现即可 @Configuration public class WebConfigurer implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { // 为url添加映射路径 registry.addMapping("/**") // 设置允许的域 .allowedOrigins("*") // 设置允许请求的方式 .allowedMethods("*") // 设置允许的header .allowedHeaders("*") // 设置是否发送cookie信息 .allowCredentials(true); } } 3.基于过滤器创建一个CorsConfig配置类，基于过滤器实现全局跨域配置。 @Configuration public class CorsConfig { public CorsConfig() { } @Bean public CorsFilter corsFilter() { // 1. 添加cors配置信息 CorsConfiguration config = new CorsConfiguration(); config.addAllowedOrigin("http://localhost:8080"); config.addAllowedOrigin("http://localhost:8081"); config.addAllowedOrigin("http://localhost:8082"); config.addAllowedOrigin("*"); // 设置是否发送cookie信息 config.setAllowCredentials(true); // 设置允许请求的方式 config.addAllowedMethod("*"); // 设置允许的header config.addAllowedHeader("*"); // 2. 为url添加映射路径 UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource(); corsSource.registerCorsConfiguration("/**", config); // 3. 返回重新定义好的corsSource return new CorsFilter(corsSource); } } 4.基于微服务网关配置 spring.cloud.gateway.routes[1].id=system #spring.cloud.gateway.routes[1].uri=http://127.0.0.1:8888 spring.cloud.gateway.routes[1].uri=lb://system spring.cloud.gateway.routes[1].predicates[0].name=Path spring.cloud.gateway.routes[1].predicates[0].args[0]=/system/** import org.springframework.context.annotation.Bean; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.reactive.CorsWebFilter; import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource; import org.springframework.web.util.pattern.PathPatternParser; /** * 配置跨域 * @return */ @Bean public CorsWebFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(Boolean.TRUE); config.addAllowedMethod("*"); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.setMaxAge(3600L); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser()); source.registerCorsConfiguration("/**", config); return new CorsWebFilter(source); }

【本文地址】

公司简介

联系我们