Vue处理响应头获取自定义headers及安全验证

"本文主要探讨了在Vue.js应用中如何在响应头(response)中获取自定义headers，以增强安全性，防止第三方伪造返回报文欺骗前端。为了验证身份，后端通常会在返回报文中添加自定义参数，前端需要校验这些参数以决定是否执行后续操作。然而，出于安全考虑，浏览器默认不会允许JavaScript访问某些自定义headers。因此，我们需要在后端接口返回时特别设置`Access-Control-Expose-Headers`来暴露这些自定义headers，以便前端可以获取到。" 在Vue.js中，当进行API请求时，如果后端返回的HTTP响应头(response headers)包含自定义headers，如`Cookie`，前端默认情况下无法直接访问。这是因为浏览器实施了同源策略(Same-Origin Policy)和CORS(Cross-Origin Resource Sharing)政策，以限制非标准headers的访问。为了解决这个问题，后端需要在返回的响应中添加`Access-Control-Expose-Headers`字段，并指定自定义header的名字，例如： ```javascript response['Access-Control-Expose-Headers'] = 'Cookie' // Cookie为自定义头的key ``` 完成上述设置后，前端便可以通过Vue.js的axios库或其他HTTP客户端库来获取这个自定义header。以下是一个Vue.js中使用axios获取`Cookie`header的示例： ```javascript 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); // 打印出Cookie值 // 对校验自定义headers，通过则进行下一步操作 } else { this.$Message.error("失败"); } } else { this.$Message.error(res.data.returnMessage); } }).catch(function (error) { console.log(error); }); ``` 除了讨论如何获取自定义headers，还提到了前端使用localStorage存储token值的场景。token是一种常见的身份验证机制，它可以减轻服务端的负担，避免每次请求都进行用户身份的验证。在Vue.js应用中，可以将获取到的token保存在localStorage中，然后在每次请求时将token放入请求头(headers)中，以实现鉴权。以下是一个简单的例子，展示了如何将token存入localStorage并设置到请求头： 1. 存储token： ```javascript localStorage.setItem('token', 'your_token_value'); ``` 2. 在axios配置中设置全局headers： ```javascript axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`; ``` 通过这种方式，每个axios请求都会携带这个token，服务端可以据此验证客户端的身份。 本文讲解了在Vue.js应用中如何处理和使用自定义headers，以及如何利用localStorage存储和管理token，确保前端与后端之间的通信安全和有效性。理解这些概念和技巧对于开发健壮的SPA(Single Page Application)至关重要。