日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作。

系统为了安全会去掉自定义头,如果不做任何处理,前端无法通过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);
 });

按照上面的操作,就可以解决欺骗前端的安全问题。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐