当前位置：首页 > news >正文

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

news 2025/5/24 6:37:15

前言

在现代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.configif (!config || !config.retry) return Promise.reject(error)config.__retryCount = config.__retryCount || 0if (config.__retryCount >= config.retry) {return Promise.reject(error)}config.__retryCount += 1await 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 {@Overridepublic 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.TokenlocalStorage.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.configif (error.response.status === 401 && !originalRequest._retry) {originalRequest._retry = truetry {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
}