梳理Axios请求的过程和 Vite 代理配置

Axios 和 Vite 配置详解

概述

本文档详细解释了项目中 Axios 配置和 Vite 代理配置的作用、关系以及工作原理。

Axios 配置 (src/axios.js)

基础配置

const instance = axios.create({baseURL: "/api", // API 基础 URLtimeout: 7000, // 请求超时时间（7秒）
})

配置说明

1. baseURL: "/api"

• 作用：设置所有请求的基础URL前缀
• 实际效果：当发起请求时，会自动在请求路径前添加 /api
• 举例：
  • 调用 instance.get('/users')
  • 实际请求的URL：/api/users
  • 完整URL：http://localhost:3000/api/users

2. timeout: 7000

• 作用：设置请求超时时间为7000毫秒（7秒）
• 实际效果：如果请求在7秒内没有收到响应，请求会被自动取消并抛出超时错误

拦截器配置

请求拦截器

instance.interceptors.request.use(function (config){const token = getToken()  // 获取认证tokenif(token){config.headers['Authorization']='Bearer '+token  // 自动添加认证头}return config;
})

作用：

• 自动获取用户的认证token
• 在请求头中添加 Authorization: Bearer <token>
• 确保每个请求都携带用户身份信息

响应拦截器

instance.interceptors.response.use(function (response){return response;  // 成功时直接返回响应
},function(error){let errorMsg=error.response.data.message||'请求失败'showMessage(errorMsg,'error')  // 统一错误提示return Promise.reject(error);
})

作用：

• 成功时：直接返回响应数据
• 失败时：自动显示错误消息给用户，提供统一的错误处理

Vite 代理配置 (vite.config.js)

代理配置

server: {hmr: true,proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},}
}

配置详解

• target: 'http://localhost:8080' - 目标后端服务器地址
• changeOrigin: true - 修改请求头中的 origin，解决跨域问题
• rewrite: 重写规则，移除请求路径中的 /api 前缀

两个配置的关系

重要说明：不是重复配置！

这两个配置在不同层面工作，配合形成完整的请求链路：

1. Axios 配置

• 作用层面：客户端代码层面
• 作用：告诉 axios 库所有请求都要添加 /api 前缀
• 运行环境：浏览器中的 JavaScript 代码

2. Vite 代理配置

• 作用层面：开发服务器层面
• 作用：告诉 Vite 开发服务器如何转发 /api 请求到后端服务器
• 运行环境：Vite 开发服务器（Node.js）

完整的请求流程

当在 Vue 组件中发起一个API请求时，完整流程如下：

1. 在 Vue 组件中调用instance.get('/users')2. Axios 添加 baseURL，请求变成GET /api/users3. 浏览器发送请求到前端开发服务器http://localhost:3000/api/users4. Vite 代理检测到 /api 前缀，根据 proxy 配置将请求转发到: http://localhost:8080/users注意：rewrite 规则移除了 /api 前缀5. 后端服务器 (localhost:8080) 处理请求GET /users6. 响应按原路返回

为什么需要这样设计？

解决的问题

开发环境跨域问题

• 前端服务器：http://localhost:3000 (Vite)
• 后端服务器：http://localhost:8080 (API服务器)
• 跨域问题：浏览器会阻止不同端口间的请求

解决方案

1. Axios baseURL：统一前端请求路径管理
2. Vite 代理：开发环境下解决跨域问题，将请求透明转发到后端

rewrite 规则的必要性

rewrite: (path) => path.replace(/^\/api/, '')

• 前端请求：/api/users
• 转发到后端：/users（移除了 /api）
• 原因：后端服务器的路由通常不包含 /api 前缀

使用示例

// 在组件中使用
import instance from '@/axios.js'// 发起请求
instance.get('/users/profile')
// 实际请求：GET /api/users/profile
// 自动携带：Authorization: Bearer <token>
// 超时限制：7秒
// 错误处理：自动显示错误消息

生产环境

在生产环境中：

• 不使用 Vite 代理
• 通常通过 Nginx 等反向代理服务器处理路由
• 或者直接将前后端部署在同一域名下

总结

Axios 配置和 Vite 代理配置是协同工作的两个不同层面的配置：

• Axios 负责客户端请求的统一管理
• Vite 代理负责开发环境的请求转发和跨域解决

它们共同确保了开发环境下前后端的无缝对接。

axios.js

const instance = axios.create({baseURL: "/api", // 你的 API 基础 URLtimeout: 7000, // 请求超时时间
})

vite.config.js

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: {// 定义一个别名 '@'，该别名对应于当前 JavaScript 模块文件所在目录下的 'src' 目录的绝对文件路径。'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {hmr: true,proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},}}
})