问题解决:前端无法获取到来自后端header中定义的token.

问题背景:

           项目中,在做前端请求,访问接口访问权限控制或登陆权限控制时,会用到token,而token会在一定时效性,而后端会在token失效后,生成新的token,返回前端进行暂存。而这时出现前端从,response返回中无法获取token的情况。

问题分析:

         前端通过写一段请求response拦截器,发现response的header中没有token关键字。经过分析过后,发现是由于跨域访问的时候,前端是不能随意获取服务器响应头部,这时需要后端对响应header进行设置。

解决方法:

         后端(java)发送请求的时候需要设置:Access-Control-Expose-Headers具体代码实现如下:

        

后端定义方式:

// 自定义响应头
ctx.res.setHeader('mytoken', 'abcefghijk'); //用于放置token内容
// 通过此header设置允许前端访问
ctx.res.setHeader('Access-Control-Expose-Headers', 'mytoken');


前端获取方式:
// 响应拦截
instance.interceptors.response.use(res => {
 const { data, status } = res
 if (res && res.headers && res.headers.mytoken){
    store.commit('setMyToken',res.header[mytoken]) //将token放到store里或获取浏览器缓存中
  }
   return { data, status }
})

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值