在response的header里面添加token,前端获取不到

本文介绍了解决前端在跨域情况下无法从后端获取JWT Token的问题。通过设置响应头Access-Control-Expose-Headers,允许前端访问指定的响应头内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在response的header里面添加token,前端获取不到

在写登录功能的时候,前端如何都获取不到token的信息

    public ResultInfo login(HttpServletResponse response, HttpServletRequest request, @RequestBody Map<String, String> param) {
        try {
            String username = param.get("username");
            String password = param.get("password");
            //对用户名和密码进行解密
            byte[] user = Base64Utils.decode(username.getBytes());
            byte[] pass = Base64Utils.decode(password.getBytes());
            username = new String(user);
            password = new String(pass);
            LOOGER.info("RequestMapping:[login] username is {},password is",username,password);
            String token = JwtUtils.createToken("123", username, false);
            //解决办法就是加上这一行代码,跨域访问允许访问的响应头的内容
            response.setHeader("Access-Control-Expose-Headers",JwtUtils.TOKEN_HEADER);

            response.setHeader(JwtUtils.TOKEN_HEADER,JwtUtils.TOKEN_PREFIX + token);
            ResultInfo resultInfo = new ResultInfo();
            resultInfo.setCode(1);
            return resultInfo;
        } catch (Exception e) {
            return new ResultInfo();
        }
    }

这是由于跨域访问的时候,不能随意获取服务器响应头,
所以在服务器编码的时候要加上下面的这行内容

response.setHeader("Access-Control-Expose-Headers",JwtUtils.TOKEN_HEADER);

意思就是允许前端跨域访问JwtUtils.TOKEN_HEADER这个响应头的内容。

<think>我们正在讨论如何在前端从HTTP响应的头部获取数据。根据引用[1]和引用[2],我们知道前端默认只能获取到部分响应头,而自定义的响应头需要服务器设置`Access-Control-Expose-Headers`来暴露。同时,引用[1]给出了React和Angular的示例,但我们现在关注的是Vue。 在Vue中,我们通常使用axios或vue-resource来发送请求。下面我将分别说明如何在这两个库中获取响应头。 ### 使用axios获取响应头 axios的响应对象中包含`headers`属性,该属性是一个对象,包含了响应头的信息。注意,响应头的字段名会被转换为小写。 示例代码: ```javascript import axios from 'axios'; axios.get('https://api.example.com/data') .then(response => { // 获取响应头 const headers = response.headers; // 获取特定的响应头,例如Content-Type const contentType = headers['content-type']; // 获取自定义响应头,例如App-Token(需要服务器暴露) const appToken = headers['app-token']; console.log('Content-Type:', contentType); console.log('App-Token:', appToken); }) .catch(error => { console.error('请求出错', error); }); ``` ### 使用vue-resource获取响应头 vue-resource的响应对象中有一个`headers`对象,我们可以通过`get`方法或直接访问`map`属性来获取响应头。 示例代码: ```javascript this.$http.get('https://api.example.com/data') .then(response => { // 获取响应头 const headers = response.headers; // 使用get方法获取,注意字段名小写 const contentType = headers.get('content-type'); // 获取自定义响应头 const appToken = headers.get('app-token'); console.log('Content-Type:', contentType); console.log('App-Token:', appToken); }) .catch(error => { console.error('请求出错', error); }); ``` ### 关键点:跨域问题 引用[2]指出,前端默认只能获取以下响应头: - Cache-Control - Content-Language - Content-Type - Expires - Last-Modified - Pragma 如果需要获取其他响应头(包括自定义的响应头),服务器必须在响应中设置`Access-Control-Expose-Headers`头部,列出需要暴露的响应头。例如,要暴露`App-Token`和`Authorization`,服务器应这样设置: ```http Access-Control-Expose-Headers: App-Token, Authorization ``` ### 总结步骤 1. 在服务器设置`Access-Control-Expose-Headers`头部,暴露需要前端获取的响应头字段。 2. 在Vue项目中,使用axios或vue-resource发送请求。 3. 在响应处理中,通过响应对象的`headers`属性获取响应头信息(注意字段名大小写)。 ### 示例:服务器设置(Node.js/Express) ```javascript app.get('/api/data', (req, res) => { // 设置允许暴露的响应头 res.setHeader('Access-Control-Expose-Headers', 'App-Token, Authorization'); // 设置自定义响应头 res.setHeader('App-Token', 'some-token-value'); // 发送响应 res.json({ message: 'Hello World' }); }); ``` 这样,前端就可以获取到`App-Token`和`Authorization`响应头了。 ### 注意事项 - 确保服务器已经正确配置CORS(跨域资源共享),包括`Access-Control-Allow-Origin`等头部。 - 在开发环境中,如果使用代理(如Vue CLI的devServer.proxy),则可能不需要设置`Access-Control-Expose-Headers`,因为代理不会触发浏览器的CORS限制。但在生产环境中,如果前后分离部署,必须设置。 ### 相关问题 1. 如何解决 Vue 中获取跨域接口的自定义 Header 被拦截的问题? 2. 除了 `vue-resource` 和 `axios`,Vue 3 还有哪些推荐的数据请求方案? 3. 如何在前端安全地存储从 Header 获取Token 信息? [^1]: 如何在浏览器中获取到接口的Response Headers的数据 [^2]: 前端获取response响应头的所有数据/信息</think>在 Vue 项目中获取响应头(response headers)数据,主要涉及以下关键步骤: ### 一、核心获取方法 1. **使用 axios 获取响应头**(推荐方案) ```javascript import axios from 'axios'; axios.get('https://api.example.com/data') .then(response => { // 获取所有响应头 const allHeaders = response.headers; // 获取特定响应头(注意名称转为小写) const contentType = response.headers['content-type']; const customHeader = response.headers['x-custom-header']; console.log('Content-Type:', contentType); console.log('Custom Header:', customHeader); }) .catch(error => { console.error('请求失败', error); }); ``` 2. **使用 vue-resource 获取响应头** ```javascript this.$http.get('https://api.example.com/data') .then(response => { // 获取所有响应头 const headers = response.headers; // 获取特定响应头 const token = response.headers.get('authorization'); console.log('Authorization Header:', token); }); ``` ### 二、关键注意事项 1. **跨域头暴露设置**(最重要!) - 默认只能获取以下安全头信息: ``` Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma ``` - 要获取自定义头(如 `Authorization`),服务器必须设置: ```http Access-Control-Expose-Headers: Authorization, X-Custom-Header ``` - Node.js/Express 示例: ```javascript res.setHeader('Access-Control-Expose-Headers', 'Authorization, App-Token'); ``` 2. **Header 名称规范** - HTTP 头名称不区分大小写,但: - axios 返回对象中统一转为**小写**(`headers['content-type']`) - vue-resource 需用小写访问(`headers.get('authorization')`) 3. **自定义头命名规范** - 避免使用 `X-` 前缀(已废弃) - 推荐格式:`App-Token`, `Api-Version` 等 ### 三、完整示例(带错误处理) ```javascript export default { methods: { async fetchData() { try { const response = await axios.get('/api/user', { params: { id: 123 }, // 需要时添加配置 headers: { 'Accept-Language': 'zh-CN' } }); // 获取认证令牌 const authToken = response.headers['authorization']; // 获取分页信息(假设服务返回) const pagination = response.headers['x-pagination']; // 使用响应头数据 if (authToken) { this.storeToken(authToken); } } catch (error) { console.error('获取头信息失败', error); // 检查是否是CORS问题 if (error.response && error.response.status === 0) { console.warn('可能是跨域头未暴露'); } } }, storeToken(token) { // 安全存储逻辑... } } } ``` ### 四、常见问题排查 1. **获取不到自定义头** - ✅ 检查服务 `Access-Control-Expose-Headers` 配置 - ✅ 确认头名称拼写(大小写不敏感但需一致) - ✅ 使用浏览器开发者工具 > Network 标签验证响应头 2. **获取到 `null` 值** - 检查请求是否重定向(某些浏览器会剥离重定向过程中的头信息) - 确认服务确实发送了该头 3. **HTTPS 安全限制** - 确保安全头(如 `Set-Cookie`)设置了 `Secure` 和 `SameSite` 属性 > 关键原理:浏览器基于安全策略限制跨域响应头访问,必须通过 `Access-Control-Expose-Headers` 显式暴露[^2]。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值