getway网关跨域问题记录

一.问题产生环境

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("*");
            }
        };
    }

所以，应该原因应该是冲突了，但是网关不配置跨域那么请求在网关就被拦截了，根本不会访问到后台接口，所以最后，最好的解决办法就是把跨域配置全都配置在网关中，由网关统一管理，