跨域:浏览器对于javascript的同源策略的限制 。
以下情况都属于跨域:
域名或端口不一致即跨域
跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击。
因此:跨域问题 是针对ajax的一种限制。
- 解决跨域问题的方案
解决方案:
JSONP:
nginx:代理
CORS:推荐
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
XMLHttpRequest 对象是核心!
CORS需要浏览器和服务器同时支持
浏览器:大部分全部支持
服务器:不需要改动任何代码,需要带着头信息即可!
CORS:原理:*****
a. 预检请求
请求:
Access-Control-Request-Method: GET
Access-Control-Request-Headers: X-Custom-Header
响应:
- Access-Control-Allow-Origin:可接受的域,是一个具体域名或者*(代表任意域名)
- Access-Control-Allow-Credentials:是否允许携带cookie,默认情况下,cors不会携带cookie,除非这个值是true
- Access-Control-Allow-Methods:允许访问的方式
- Access-Control-Allow-Headers:允许携带的头
- Access-Control-Max-Age:本次许可的有效时长,单位是秒,过期之前的ajax请求就无需再次进行预检了
如何使用:我们项目中如何解决跨域问题!
1. 在后台代码的控制器中添加一个注解:
@CrossOrigin
当前服务启动的时候,需要注册到nacos 上!通过网关访问后台微服务
2. 在网关中设置跨域!
@Bean
public CorsWebFilter corsWebFilter(){
// 创建CorsConfiguration
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedHeader("*"); // 任意请求头
corsConfiguration.addAllowedOrigin("*"); // 允许任意域名
corsConfiguration.addAllowedMethod("*"); // GET, POST, PUT 表示任意
corsConfiguration.setAllowCredentials(true);// 允许携带cookie
// 需要CorsConfigurationSource 这个对象 是一个接口,所以我们需要当前接口的实现类 UrlBasedCorsConfigurationSource
UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
// 第一个参数表示路径,第二个参数表示设置跨域的方式等信息 CorsConfiguration
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);
// 返回当前对象
return new CorsWebFilter(urlBasedCorsConfigurationSource);
}
测试:能否正常访问后台微服务数据!
推荐使用在网关中配置跨域!做全局配置!
评论区