jwt+vue+axios 跨域传参获取后端header状态码的通用套路

2024-01-20 09:36:15

跨域传参获取后端 Header 状态码：JWT + Vue + Axios 的通用套路

在当下前后端分离架构盛行的时代，JWT（JSON Web Token）已成为用户认证的主流方案。然而，在使用 JWT 与 Vue.js 和 Axios 进行项目开发时，你可能会遇到一个棘手的问题：前端无法获取后端在 Header 中设置的状态码，导致响应拦截器无法正常发挥作用。本文将深入剖析这个问题并提供一个通用的解决方案，助你轻松实现 JWT 鉴权功能。

问题分析：跨域限制的阻碍

前端和后端通过网络请求进行交互。当前端发送请求时，后端会返回一个响应，其中包含状态码、Header 和响应体。然而，前端只能获取到响应体中的内容，而无法直接获取到 Header 中的信息。这是由于浏览器的同源策略，它出于安全考虑，限制了跨域数据传输。

解决方法：双管齐下的策略

要解决这个问题，我们需要同时在后端和前端采取措施：

后端部分：开启跨域 Header 传输

在后端，我们需要在响应中添加一个特殊的 Header，允许前端访问特定 Header 的信息。这可以通过在响应对象中使用 addHeader() 方法来实现：

// 设置响应状态码
response.setStatus(HttpStatus.OK.value());

// 设置允许前端访问的 Header
response.addHeader("Access-Control-Expose-Headers", "Authorization");

前端部分：携带凭证的请求

在前端，我们需要使用 Axios 库发送请求，并设置 withCredentials 属性为 true，以便在请求中携带 Cookie。这样，当后端返回响应时，前端就可以获取到 Header 中的信息：

axios.get('/api/user', {
  withCredentials: true
}).then((response) => {
  console.log(response.headers);
});

代码示例：实战演示

下面是一个完整的代码示例，展示了如何在 Spring Boot 后端和 Vue.js 前端实现 JWT + Vue + Axios 跨域传参获取后端 Header 状态码：

后端 (Spring Boot)：

@RestController
public class UserController {
    @GetMapping("/api/user")
    public User getUser() {
        // 模拟从数据库获取用户信息
        User user = new User();
        user.setId(1);
        user.setName("John Doe");
        
        // 生成 JWT 令牌
        String token = JwtUtils.generateToken(user);
        
        // 设置响应状态码和允许前端访问的 Header
        response.setStatus(HttpStatus.OK.value());
        response.addHeader("Access-Control-Expose-Headers", "Authorization");
        response.addHeader("Authorization", "Bearer " + token);
        
        return user;
    }
}

前端 (Vue.js)：

import axios from 'axios';

export default {
    methods: {
        getUser() {
            axios.get('/api/user', {
                withCredentials: true
            }).then((response) => {
                console.log(response.headers);
            });
        }
    }
}