前言:
最近在做互联网+的项目,后端打算采用分布式微服务架构,也算是给自己练习一下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成功