一.问题产生环境
1.1 为什么会产生跨域问题？
跨域不一定都会有跨域题。
因为跨域问题是浏览器对于ajax请求的一种安全限制；
一个页面发起的 ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击；
因此：
跨域问题是针对ajax的一种限制但是这却给我们的开发帯来了不便,而且在实际生产环境中,
肯定会有很多台服务器之间交互,地址和端口都可能不同,怎么办?
1.2 因为公司微服务项目是前后端分离，前后分离后采用了SpringCloud Getway网关技术，这样请求会经历三个流程：
1.前端请求 ===》2.网关 ==》3.后端接口
1.这是单独项目的前段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<!--JQuery在线引用-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function form_btn(){
var list = JSON.stringify([
{phone: "17320427943", region_code: "620100"},
{phone: "17320427943", region_code: "620100"}
]);
alert(list);
$.ajax({
url: "http://localhost:8083/p1upgrade/app/api/delPhoneWarnConf?token=1_grand",
data: list,
type: "POST",
contentType: "application/json;charset=utf-8",
success: function(result){
var list = eval（result);//解析json
alert(list.data);
}
});
}
</script>
<body>
<h1>springboot访问第一个html页面</h1>
<button onclick="form_btn()">提交</button>
</body>
</html>
2.网关部分的代码：application.yml
server:
port: 8083
spring:
cloud:
gateway:
routes:
- id: json_route
uri: http://192.168.1.206:8080
predicates:
- Header=Accept, .*json.*
- id: binary_route1
uri: http://192.168.1.206:8080
predicates:
- Path=/p1upgrade/app/api/**
- id: userCheck121
uri: http://192.168.1.206:8080
predicates:
- Path=/p1upgrade/sysManage/userCheck121
- id: appPicManage
uri: http://192.168.1.206:8080
predicates:
- Path=/p1upgrade/picManage/**
- id: path_route
uri: http://192.168.1.206:8080
predicates:
- Path=/**
3.后端接口部分代码：只是问题重现，接口部分代码没有优化
@RequestMapping("delPhoneWarnConf")
public void delPhoneWarnConf(HttpServletResponse rps,
@RequestBody List<Map<String,Object>> list) {
rps.setContentType("application/json;charset=UTF-8");
List<Map<String, Object>> maps=list;
Integer rtcount=0;
for (Object object : maps) {
Map <String,Object> ret = (Map<String, Object>) object;//取出list里面的值转为map
rtcount+=alarmConfigService.delPhoneWarnConf(ret.get("phone").toString(),ret.get("region_code").toString());
}
JSONObject result=SystemUtils.responseBody(0, "success", rtcount);
try {
rps.getWriter().write(result.toString());
} catch (IOException e) {
e.printStackTrace();
}
}
二.错误现象
三.解决办法
目前常用的跨域解决方案有三种：
（1） jsonp:
最早的解决方案，利用script标签可以跨域的原理实现
缺点：需要服务的支持，
只能发起get请求
（2）nginx反向代理：
思路是利用nginx把跨域反向代理为不跨域，支持各种请求方式
缺点：需要nginx进行额外配置，语义不清晰
（3）CORS:
思路：规范化的跨域请求方案，安全可靠
优势：在服务端进行控制是否允许跨域，靠自定义规则。支持各种请求方式。
缺点：会产生额外的请求
这里一般会采用第三种CORS的跨域方案；
四.什么是CORS
CORS是一个w3c标准,全称是"跨域资源共享"(Cross-origin resource sharing),
但一个请求url的协议,域名,端口三者之间任意与当前页面地址不同即为跨域.它允许阅览器向跨源服务器发送XMLHttpRequest请求,从而克服AJAX只能同源使用的限制.
CORS需要浏览需和服务器同时支持。
浏览器端：
目前,所有浏览器都支持该功能,浏览器不能低于IE10(E10以下不行)。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。
服务端:
CORS通信与AAX没有任何差別,因此你不需要改变以前的业务逻辑。只不过,浏览器会在请求中携带一些头信息,我们需要以此判断是否允许其域,然后在响应头中加入一些信息即可。这一般通过过滤器完成即可
五.原理
非简单请求的CORS请求，会在正式通信前进行一次Http查询请求，又称预检请求。
浏览器先请求服务器，当前网页所在域名是否在服务器许可名单中以及可以使用那些HTTP动词和头信息字段，当客户端得到肯定答复时，浏览器才会正式发出XMLHttpRequest请求。否则就会报错。
“预检”请求的样板：
OPTIONS /cors HTTP/1.1
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: http://localhost:8082
Referer: http://localhost:8082/hello
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
Origin :指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域
Access-Control-Request-Method: 接下来会用到的请求方式get,post,put等
Access-Control-Request-Headers：会额外用到的头信息
User-Agent: 浏览器代理
“预检”请求的响应：
六.实现网关跨域请求
虽然原理比较复杂，但是操作起来没那么难：
- 浏览器端都由浏览器自动完成，我们无需操心
- 服务端可以通过拦截器统一实现，不必每次都去进行跨域判定的编写
事实上，Spring已经帮我们写好了CORS的跨域过滤器，内部已经实现了判定逻辑。
- spring-webmvc:CorsFilter
- spring-webflux:CorsWebFilter
springcloud_gateway集成的是webflux,所以这里使用的是CorsWebFilter
6.1 在启动类中编写一个配置类，并且注册CorsWebFilter
@Bean
public CorsWebFilter corsWebFilter() {
//cors跨域对象
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("http://localhost:8082");// #允许向该服务器提交请求的URI，*表示全部允许，在SpringMVC中，如果设成*，会自动转成当前请求头中的Origin
config.setAllowCredentials(true); // 允许cookies跨域
config.addAllowedMethod("*");// 允许提交请求的方法，*表示全部允许
config.addAllowedHeader("*");// #允许访问的头信息,*表示全部
config.setMaxAge(18000L);// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
//cors过滤对象
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsWebFilter(source);
}
6.2 CorsWebFilter实现的是WebFilter，所以也可以在启动类中编写一个配置类，并且注册WebFilter，代码如下，
1 @Bean
2 public WebFilter corsFilter() {
3 return new WebFilter() {
4
5 @Override
6 public Mono<Void> filter(ServerWebExchange ctx, WebFilterChain chain) {
7 ServerHttpRequest request = ctx.getRequest();
8 if (CorsUtils.isCorsRequest(request)) {
9 ServerHttpResponse response = ctx.getResponse();
10 HttpHeaders headers = response.getHeaders();
11 headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, "*");
12 headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS,"*");
13 headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS,"*");
14 headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");
15 headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, "*");
16 headers.add(HttpHeaders.ACCESS_CONTROL_MAX_AGE, "3600");
17 if (request.getMethod() == HttpMethod.OPTIONS) {
18 response.setStatusCode(HttpStatus.OK);
19 return Mono.empty();
20 }
21 }
22 return chain.filter(ctx);
23 }
24
25 };
26 }
以上6.1和6.2两种方案经过测试都是可以的，任意采用一种即可，建议采用6.1代码相对简单点，
6.3 效果展示
七.因为网关和后端项目都有配置跨域配置，会导致另一种报错
7.1报错现象
响应头信息：
7.2 接口返回状态已经是200，说明已经访问成功了，但是因为项目后端启动之前也配置过跨域配置，所以会与网关配置冲突，导致响应头中返回了两个可接受的域，正常一般是一个，导致报错还存在，
后端启动类跨域配置，主要是对主接口跨越进行控制，
//springcloud-前端跨域问题的解决方案全局配置
@Bean
public WebMvcConfigurerAdapter corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/anzhou/*").allowCredentials(true).allowedMethods("*").maxAge(3600).allowedHeaders("*");
registry.addMapping("/sysManage/*").allowedOrigins("*").allowCredentials(true).allowedMethods("*").maxAge(3600).allowedHeaders("*");
registry.addMapping("/sysManage/*").allowedOrigins("*").allowCredentials(true).allowedMethods("*").maxAge(3600).allowedHeaders("*");
registry.addMapping("/polluSource/*").allowedOrigins("*").allowCredentials(true).allowedMethods("*").maxAge(3600).allowedHeaders("*");
registry.addMapping("/app/api/*").allowedOrigins("*").allowCredentials(true).allowedMethods("*").maxAge(3600).allowedHeaders("*");
registry.addMapping("/checkManagement/*").allowCredentials(true).allowedMethods("*").maxAge(3600).allowedHeaders("*");
registry.addMapping("/minisite/*").allowedOrigins("*").allowCredentials(true).allowedMethods("*").maxAge(3600).allowedHeaders("*");
registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods("*").maxAge(3600).allowedHeaders("*");
}
};
}
所以，应该原因应该是冲突了，但是网关不配置跨域那么请求在网关就被拦截了，根本不会访问到后台接口，所以最后，最好的解决办法就是把跨域配置全都配置在网关中，由网关统一管理，
