vue在响应头response中获取自定义headers操作

Vue.js 是一款流行的前端框架，用于构建用户界面。在实际的Web开发中，与服务器通信是必不可少的一部分，通常我们使用Ajax请求（例如 Axios）来发送HTTP请求获取或提交数据。在涉及安全性的场景中，为了防止第三方伪造响应报文欺骗前端，后端会在响应头中添加自定义的headers，这些自定义headers包含了用于验证身份的关键信息。 在Vue中，通过 Axios 发送POST请求时，我们可能需要获取响应头中的自定义headers。由于浏览器的安全策略，某些自定义headers不会暴露给JavaScript，除非在服务器端明确指定允许暴露。这就是`Access-Control-Expose-Headers`的作用。例如，如果我们在后端设置： ```javascript response['Access-Control-Expose-Headers'] = "Cookie" ``` 这样，前端就能在接收到响应后访问到名为`Cookie`的自定义header。在Vue中，我们可以这样获取它： ```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); // 验证自定义headers，通过则进行下一步操作 } else { this.$Message.error("失败"); } } else { this.$Message.error(res.data.returnMessage); } }).catch(function(error) { console.log(error); }); ``` 在这个例子中，`$http`是Axios的封装，`res.headers.cookie`即为获取到的自定义header值。 补充一下关于`token`的知识，`token`是一种常见的认证机制，主要用于减少服务器查询数据库的负担。当用户登录成功后，服务器生成一个唯一的`token`返回给客户端，客户端每次请求时都携带这个`token`，服务器通过验证`token`来确认用户的身份，而不是每次都去查询用户名和密码。 使用`token`的好处包括： 1. 减轻服务器压力，减少数据库查询。 2. 提高系统性能和安全性。 3. 适应性强，适合Web和移动应用。 在Vue中，可以利用`localStorage`来存储`token`，以便跨页面共享。例如，登录成功后，我们可以将`token`存储到`localStorage`中： ```javascript handleLogin() { this.$axios({ method: 'post', url: '/api/v1/login', headers: { 'Content-Type': "application/json;charset=UTF-8", }, data: { name: this.loginForm.username, password: this.loginForm.password } }).then((res) => { if (res.data.success) { localStorage.setItem('token', res.data.token); // 进行其他登录成功后的操作 } else { // 登录失败处理 } }).catch((error) => { console.log(error); }); } ``` 之后在其他页面中，可以通过`localStorage.getItem('token')`来获取`token`，并在请求头中添加`token`，确保每次请求都能携带有效的认证信息。 总结，本文讲解了Vue中如何在响应头中获取自定义headers，以及`token`在前端存储和使用的方法，这些都是Web开发中确保安全性及优化性能的重要实践。