Vite Proxy到底是咋个工作嘞？

proxy 要不要写、rewrite 要不要写、axios 的请求路径该怎么写？我好乱啊！！！

你是不是也经常遇到类似的问题，搞不清路径到底该咋个写，今天就让你学个明明白白的。

一、先用一句话说清 Proxy 在干嘛

Vite Proxy = 本地开发时的"请求中转站"

它做的事情只有一件：

把浏览器发给本地的请求，偷偷转发到真正的后端服务器

---

为什么需要它？

因为浏览器有 跨域限制：

前端：http://localhost:5173
后端：http://192.168.110.220:8888

err:直接请求会被浏览器拦掉

Proxy 的作用就是：
浏览器只跟 Vite 说话，Vite 去跟后端说话，通俗来讲，就是vite中封装的Proxy是个媒婆，你跟后端是相亲的，你的话需要通过媒婆来传递给后端。

---

二、Proxy 的工作流程（一定要理解）

假设你在浏览器里请求：

http://localhost:5173/api/csr/generate

Vite Proxy 做的事是：

浏览器
  ↓
Vite 开发服务器（localhost:5173）
  ↓（匹配 /api 规则）
代理转发
  ↓
真正后端（192.168.110.220:8888）

⚠️ 重点：
Proxy 只在「开发环境」生效，生产环境完全无效

---

三、Proxy 配置里最重要的 3 个东西

proxy: {
  '/api': {
    target: 'http://192.168.110.220:8888',
    changeOrigin: true,
    rewrite: ...
  },
}

我们一个一个讲。

---

1. /api ------「拦谁」

'/api'

意思是：

只要请求路径是以 /api 开头的，才走代理

例如：

请求路径	是否走代理
/api/csr/generate	✅
/api/user/login	✅
/csr/generate	❌
/login	❌

---

2. target ------「转给谁」

target: 'http://192.168.110.220:8888'

意思是：

最终请求会发给哪个后端服务器

---

3.rewrite ------「要不要改路径」

这是最容易迷糊的地方，但其实逻辑非常简单。

---

四、rewrite 的本质（一句话）

rewrite = 把"前端请求路径"改成"后端能识别的路径"

如果前端路径和后端路径 一模一样：

❌ 不需要 rewrite

如果不一样：

✅ 才需要 rewrite

---

五、最重要的前提：先搞清"后端真实接口长什么样"

我们用你真实的接口来讲：

后端真实接口：
http://192.168.110.220:8888/api/csr/generate

👉 注意：
/api 是后端接口的一部分

---

六、场景一（最推荐）：/api 只是前端代理前缀

场景描述

后端接口：/csr/generate
前端想统一写：/api/xxx

正确配置

vite.config.ts

proxy: {
  '/api': {
    target: 'http://192.168.110.220:8888',
    changeOrigin: true,
    rewrite: path => path.replace(/^/api/, ''),
  },
},

axios

// baseURL
'/api'

// 请求
api.post('/csr/generate')

实际发生的事

/api/csr/generate
↓ rewrite
/csr/generate
↓
192.168.110.220:8888/csr/generate

✅ rewrite 有意义

---

七、场景二（⭐你现在的真实场景）：/api 是后端真实路径

场景描述

后端接口：/api/csr/generate
前端请求：/api/csr/generate

👉 前后端路径完全一致

---

正确配置（最简单、最不容易出错）

vite.config.ts

proxy: {
  '/api': {
    target: 'http://192.168.110.220:8888',
    changeOrigin: true,
    // ❌ 不写 rewrite
  },
},

axios

// baseURL
'/api'

// 请求
api.post('/csr/generate')

---

实际请求路径

localhost:5173/api/csr/generate
↓
192.168.110.220:8888/api/csr/generate

✅ 完全正确

✅ 不多、不少

✅ 不 404

---

八、为什么 rewrite: replace(/^/api/, '/api') 没意义？

我们来算一遍：

'/api/csr/generate'.replace(/^/api/, '/api')

结果还是：

/api/csr/generate

👉 路径根本没变

所以：

• ✔️ 写了不报错
• ❌ 但等于没写
• ❌ 还容易误导别人

---

九、axios 和 proxy 配合的"黄金规则"

一句话口诀（非常重要）

baseURL 里有 /api，请求路径里就不要再写 /api

---

正确示例

baseURL: '/api'
api.post('/csr/generate')

---

错误示例（最常见 404 来源）

baseURL: '/api'
api.post('/api/csr/generate') // ❌

实际请求变成：

/api/api/csr/generate

---

十、不同配置组合对照表（建议收藏）

baseURL	axios 请求	实际请求
/api	/csr/generate	/api/csr/generate ✅
/api	/api/csr/generate	/api/api/csr/generate ❌
/	/api/csr/generate	/api/csr/generate ✅

---

十一、完整推荐模板（开发 + 生产）

.env.development

VITE_API_BASE_URL=/api

.env.production

VITE_API_BASE_URL=http://192.168.110.220:8888

axios 封装

import axios from 'axios'

export default axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
})

---

十二、最后用一句大白话收尾

Proxy 不神秘，它只是帮你"改地址"；
axios 不复杂，它只是"拼路径"；
你只要分清：
👉 /api 是不是后端真实路径，
👉 rewrite 就永远不会再写错。