前后端联调实战指南：Axios拦截器、CORS与JWT身份验证全解析

最新推荐文章于 2025-05-24 13:49:21 发布

程序员Bears

最新推荐文章于 2025-05-24 13:49:21 发布

阅读量872

点赞数 18

分类专栏： Python全栈成长笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_57755194/article/details/148166317

版权

Python全栈成长笔记专栏收录该内容

23 篇文章

订阅专栏

前言

在现代Web开发中，前后端分离架构已成为主流，而前后端联调则是开发过程中不可避免的关键环节。本文将深入探讨前后端联调中的三大核心技术：Axios拦截器的灵活运用、CORS跨域问题的全面解决方案以及JWT身份验证的安全实现。通过本文，你将掌握一套完整的联调技能体系，大幅提升开发效率。

一、Axios拦截器：前后端通信的智能管家

1.1 Axios拦截器核心概念

Axios拦截器是Axios库提供的强大功能，允许我们在请求发出前和响应返回后插入自定义逻辑。这种机制特别适合处理以下场景：

统一添加认证信息：自动为每个请求添加JWT令牌
全局错误处理：统一处理网络错误和业务错误
请求/响应数据转换：格式化请求数据或解析响应数据
性能监控：记录请求耗时等性能指标

1.2 请求拦截器实战

请求拦截器最常见的用途是自动添加认证令牌。以下是一个完整的实现示例：

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    // 对请求错误做些什么
    console.log('请求错误：', error)
    return Promise.reject(error)
  }
)

关键点解析：

通过localStorage获取存储的JWT令牌
使用Bearer方案添加认证头，这是JWT的标准做法
确保在修改配置后返回config对象

1.3 响应拦截器进阶用法

响应拦截器可以统一处理错误和转换数据格式：

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    
    // 假设业务代码20000表示成功
    if (res.code !== 20000) {
      // 处理业务错误
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 令牌过期或无效，跳转登录
        MessageBox.confirm('登录状态已过期，请重新登录', '确认登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      // 成功请求直接返回数据部分
      return res
    }
  },
  error => {
    // 处理HTTP错误
    console.log('响应错误：' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

最佳实践建议：

根据业务状态码而非HTTP状态码处理业务错误
对令牌过期等常见错误提供友好提示和自动跳转
统一错误消息展示方式，提升用户体验

1.4 拦截器高级技巧

1.4.1 特定请求跳过拦截器

有时我们需要某些请求不经过拦截器处理，比如登录请求或外部API调用：

// 在请求配置中添加自定义标记
axios.get('/public-api', {
  skipAuth: true
})

// 在拦截器中检查
service.interceptors.request.use(config => {
  if (!config.skipAuth) {
    // 添加认证头
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
  }
  return config
})

或者为外部API创建独立的axios实例：

const externalApi = axios.create({
  baseURL: 'https://api.github.com/'
})
// 这个实例不会添加认证头

1.4.2 请求重试机制

对于因网络波动导致的失败请求，可以实现自动重试：

service.interceptors.response.use(null, async (error) => {
  const config = error.config
  if (!config || !config.retry) return Promise.reject(error)
  
  config.__retryCount = config.__retryCount || 0
  if (config.__retryCount >= config.retry) {
    return Promise.reject(error)
  }
  
  config.__retryCount += 1
  await new Promise(resolve => setTimeout(resolve, 1000))
  return service(config)
})

二、CORS解决方案：跨越前端的"同源"障碍

2.1 CORS本质解析

CORS(Cross-Origin Resource Sharing)是现代浏览器实现的一种安全机制，它限制了一个源(协议+域名+端口)的Web应用访问另一个源的资源。理解CORS的关键点：

简单请求：直接发送实际请求，包含Origin头
预检请求：非简单请求先发OPTIONS请求检查服务器是否允许
凭证模式：withCredentials决定是否发送cookie等凭证

2.2 后端CORS配置

2.2.1 Node.js/Express配置

const express = require('express')
const cors = require('cors')

const app = express()

// 基本CORS配置
app.use(cors())

// 高级定制配置
app.use(cors({
  origin: ['https://yourdomain.com', 'https://yourotherdomain.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 86400
}))

2.2.2 Spring Boot配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://yourdomain.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

2.3 前端处理CORS问题

2.3.1 开发环境代理配置

在vue.config.js中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-api.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2.3.2 生产环境Nginx配置

server {
    listen 80;
    server_name yourdomain.com;
    
    location /api {
        proxy_pass http://backend-api.com;
        add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';
        
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 86400;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

2.4 常见CORS问题排查

预检请求失败：确保服务器正确处理OPTIONS方法
凭证不发送：前后端都要设置withCredentials和allowCredentials
响应头缺失：检查服务器是否返回必要的CORS头
缓存问题：预检结果可能被缓存，修改配置后清除缓存

三、JWT身份验证：安全前后端通信的基石

3.1 JWT工作原理

JWT(JSON Web Token)是一种开放标准(RFC 7519)，由三部分组成：

Header：声明类型和签名算法

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload：包含声明(用户信息等)

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

Signature：对前两部分的签名，防止篡改

3.2 后端JWT实现(.NET Core示例)

3.2.1 配置JWT服务

services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
}).AddJwtBearer(options =>
{
    options.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateIssuer = true,
        ValidateAudience = true,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true,
        ValidIssuer = Configuration["Jwt:Issuer"],
        ValidAudience = Configuration["Jwt:Audience"],
        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["Jwt:Key"]))
    };
});

3.2.2 生成Token接口

[ApiController]
[Route("api/auth")]
public class AuthController : ControllerBase
{
    [HttpPost("login")]
    public IActionResult Login([FromBody] LoginRequest request)
    {
        // 验证用户凭证
        if (!IsValidUser(request.Username, request.Password))
            return Unauthorized();
        
        // 创建声明
        var claims = new[]
        {
            new Claim(JwtRegisteredClaimNames.Sub, request.Username),
            new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString())
        };
        
        // 生成令牌
        var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_config["Jwt:Key"]));
        var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
        
        var token = new JwtSecurityToken(
            issuer: _config["Jwt:Issuer"],
            audience: _config["Jwt:Audience"],
            claims: claims,
            expires: DateTime.Now.AddMinutes(30),
            signingCredentials: creds);
        
        return Ok(new { Token = new JwtSecurityTokenHandler().WriteToken(token) });
    }
}

3.3 前端JWT集成

3.3.1 登录获取Token

async function login(username, password) {
  try {
    const response = await axios.post('/api/auth/login', {
      username,
      password
    })
    const token = response.data.Token
    localStorage.setItem('token', token)
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
    return true
  } catch (error) {
    console.error('登录失败:', error)
    return false
  }
}

3.3.2 Token自动刷新

axios.interceptors.response.use(response => {
  return response
}, async error => {
  const originalRequest = error.config
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true
    
    try {
      const newToken = await refreshToken()
      localStorage.setItem('token', newToken)
      axios.defaults.headers.common['Authorization'] = `Bearer ${newToken}`
      originalRequest.headers['Authorization'] = `Bearer ${newToken}`
      return axios(originalRequest)
    } catch (refreshError) {
      // 刷新失败，跳转登录
      window.location.href = '/login'
      return Promise.reject(refreshError)
    }
  }
  return Promise.reject(error)
})

async function refreshToken() {
  const response = await axios.post('/api/auth/refresh')
  return response.data.Token
}