前言:
最近后端在做验token时遇到一个问题,两个前端项目分别使用Vue和Angular。两个项目token产生和验签规则是一样的(流程:后端Java在拦截器中验token,如果验签成功刷新token,将刷新后的token设置到响应头中,前端在响应头中去取这个token,并对旧token进行覆盖)
拦截器中设置响应头如下:
// 将token设置到响应头中
response.setHeader("token",encryptToken);
使用Vue的项目正常取没有任何问题,但是在使用Angular的项目中去取响应头token却一直取不出来,前端在控制台打印响应头发现打印出来的响应头没有我们设置的这个token响应头,但是在浏览器中确实能看到响应头中有token这个响应头,这让我怀疑,是不是前端取响应头的方法有问题,浏览器响应头中已经有token这个响应头,而在项目打印的响应确没有token这个响应头。
后面查阅资料:发现了一个名为
"Access-Control-Expose-Headers"的头,大概意思是将哪些响应头暴露给前端,让前端去操作获取。就像header白名单。
在涉及跨域请求时,response中大部分header需要源服务端同意才能拿到,所以需要在response中增加一个如下header:
(拦截器中新增Access-Control-Expose-Headers头,将上面的token头加入白名单)
response.addHeader("token",encryptToken);
response.setHeader("Access-Control-Expose-Headers","token"); // 将响应头token加入白名单,供外界操作获取
另附:
拦截器配置解决前后端分离跨域问题:
/**
* 开启跨域
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
// 设置允许跨域的路由
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOriginPatterns("*")
// 是否允许证书(cookies)
.allowCredentials(true)
// 设置允许的方法
.allowedMethods("*")
// 运行的请求头
.allowedHeaders("*")
// 跨域允许时间
.maxAge(3600);
}
关山难越,谁悲失路之人?萍水相逢,尽是他乡之客。