springcloud微服务架构下Gateway网关转发请求，微服务为浏览器设置cookie的试错经历

前言：

最近在做互联网+的项目，后端打算采用分布式微服务架构，也算是给自己练习一下springcloud，现在做到网关的这一步，初步打算在网关做一个鉴权的操作，用户登录成功后，给客户端设置一个jwt加密的cookie用于鉴权操作，所以有了这一次试错。

---

问题描述：

项目为前后端完全分离，前端运行在localhost：9001端口，网关在10010端口，微服务在10002端口
最开始，我搭好网关之后，分别用jquery ajax和axios的方式，测试了一下，都出现了2个问题，首先是报的跨域问题，其次，后端微服务设置的cookie也没有出现在浏览器中

原因分析：

首先那么问题来了，我在后端是有设置跨域允许的，为什么会报这种跨域的错误，经过翻查大家的经验以及检查自己的代码，发现 我在微服务和网关中都配置了跨域

我在微服务接口中使用了@CrossOrigin注解，而在Gateway网关中自己配置了一个开启跨域的CorsFilter，这2套跨域配置重复冲突了，所以会报一个跨域的错误

像这样的情况，我找到了2个解决办法

• 去掉微服务中controller的@CrossOrigin注解
  如果你的微服务只被网关转发请求以及被其他服务调用，我推荐是这一种方法，因为服务之间的调用以及网关转发是不存在跨域问题的，这样问题就迎刃而解了

• 在Gateway网关加上一些内置的filter
  翻阅springcloud Gateway官方文档可以找到一些实用的内置filter供我们使用
  建议大家多去翻阅文档，可以解决很多问题
  https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/
  我给大家总结了几个

filter	作用	参数
AddRequestHeader	为原始请求添加Header	Header的名称及值
AddRequestParameter	为原始请求添加请求参数	参数名称及值
AddResponseHeader	为原始响应添加Header	Header的名称及值
DedupeResponseHeader	剔除响应头中重复的值	需要去重的Header名称及去重策略
Hystrix	为路由引入Hystrix的断路器保护	HystrixCommand的名称
FallbackHeaders	为fallbackUri的请求头中添加具体的异常信息	Header的名称
PrefixPath	为原始请求路径添加前缀	前缀路径
PreserveHostHeader	为请求添加一个 preserveHostHeader=true的属 性，路由过滤器会检查该属性以 决定是否要发送原始的Host	无
RequestRateLimiter	用于对请求限流，限流算法为令牌桶	keyResolver、 rateLimiter、 statusCode、 denyEmptyKey、 emptyKeyStatus
RedirectTo	将原始请求重定向到指定的URL	http状态码及重定向的 url
RemoveHopByHopHeadersFilter	为原始请求删除IETF组织规定的 一系列Header	默认就会启用，可以通 过配置指定仅删除哪些 Header
RemoveRequestHeader	为原始请求删除某个Header	Header名称
RemoveResponseHeader	为原始响应删除某个Header	Header名称
RewritePath	重写原始的请求路径	原始路径正则表达式以 及重写后路径的正则表 达式
RewriteResponseHeader	重写原始响应中的某个Header	Header名称，值的正 则表达式，重写后的值
SaveSession	在转发请求之前，强制执行 WebSession::save操作	无
secureHeaders	为原始响应添加一系列起安全作 用的响应头	无，支持修改这些安全 响应头的值
SetPath	修改原始的请求路径	修改后的路径
SetResponseHeader	修改原始响应中某个Header的值	Header名称，修改后的值
SetStatus	修改原始响应的状态码	HTTP 状态码，可以是 数字，也可以是字符串
StripPrefix	用于截断原始请求的路径	使用数字表示要截断的路径的数量
Retry	针对不同的响应进行重试	retries、statuses、 methods、series
RequestSize	设置允许接收最大请求包的大 小。如果请求包大小超过设置的 值，则返回 413 Payload Too Large	请求包大小，单位为字 节，默认值为5M
ModifyRequestBody	在转发请求之前修改原始请求体内容	修改后的请求体内容
ModifyResponseBody	修改原始响应体的内容	修改后的响应体内容

第二种方法就是在网关中设置相应filter，对微服务响应的header进行清除和修改

第二个问题

跨域问题解决了，为什么我的浏览器还是没有cookie值，明明响应体的header中是有set-header的存在

我直接请求网关是可以成功设置cookie值的，用JQuery ajax或者axios则不行，我分析问题出在ajax请求的参数配置上了

经过我翻阅axios和JQuery官方文档发现，跨域请求要加上withcredit的配置
以下为我改正后的请求代码
axios

axios({url:'http://localhost:10010/user/userinfo/1577404648',withCredentials: true})
        .then(function (response) {
            console.log(response);
            alert(JSON.stringify(response.data.data.username))
        })
        .catch(function (error) {
            console.log(error);
        });

ajax

<script>


$.ajax({
        url:'http://localhost:10010/user/userinfo/1577404648',
        type:'POST',
        contentType: 'application/json; charset=UTF-8',
        xhrFields :{withCredentials: true},
        success: function (data) {

            alert(data.data.username)
        }
    })

</script>

这样子，后端能给浏览器add cookie，前端也能在请求时带上cookie



最后前后端测试均成功,微服务中读取cookie成功，浏览器设置cookie成功