vue在响应头response中获取自定义headers
日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作。系统为了安全会去掉自定义头,如果不做任何处理,前端无法通过javascript访问自定义头,所以需要在接口返回中添加这样的操作。response['Cookie'] ='13231231231' #自定义头添加...
·
日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作。
系统为了安全会去掉自定义头,如果不做任何处理,前端无法通过javascript访问自定义头,所以需要在接口返回中添加这样的操作。
response['Cookie'] ='13231231231' #自定义头
添加后接口返回信息如以下截图:
控制台打印headers信息如以下截图:
要正确打印需要在接口返回中设置以下信息:
response['Access-Control-Expose-Headers'] = "Cookie" #Cookie为自定义头的key
设置完后,打印截图如下:
VUE前端获取代码如下:
this.$http.post("/xx/xxx", {
tel: '12345678901',
code: '123456'
}).then(res => {
if (res.data.returnCode == 0) {
if (res.data.bean) {
let cookie = res.headers.cookie;
console.log(cookie);
//校验自定义headers,通过则进行下一步操作
} else {
this.$Message.error("失败");
}
} else {
this.$Message.error(res.data.returnMessage);
}
}).catch(function(error) {
console.log(error);
});
按照上面的操作,就可以解决欺骗前端的安全问题。
更多推荐
已为社区贡献2条内容
所有评论(0)