前后端聯調實戰指南：Axios攔截器、CORS與JWT身份驗證全解析

前言

在現代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
}