[!info] related notes

• 所属：开发服务器与 HMR
• 相关：环境变量 · 前端 HTTP

Vite 开发服务器与代理

这个概念为什么出现

localhost:5173 与 localhost:3000 不同源。后端未正确允许 CORS 时，浏览器脚本不能读取跨域响应；部分请求会先预检，不能笼统理解为所有请求都未发出。开发期用 dev server 代理把 /api 转到后端，让相对路径请求“看起来同源”。

[!abstract] 一句话理解 proxy 是开发期网关胶水，不是生产架构；生产应网关/同源/CORS。

最小示例

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
})

export async function fetchSku(id: string) {
  const response = await fetch('/api/skus/' + encodeURIComponent(id))
  if (!response.ok) throw new Error(`SKU request failed: ${response.status}`)
  return response.json()
}

关注点

• preview.proxy 默认继承 server.proxy，所以本地 preview 也可能代理；这些规则不进入 dist/，生产需单独配置
• 示例保留 /api 前缀；后端若接收 /skus/...，需显式配置 rewrite
• changeOrigin 修改代理到后端的 Host，不等于给浏览器开放 CORS；浏览器应请求同源 /api/...，绝对后端 URL 会绕过代理
• cookie 域名/路径可能需额外配置
• WebSocket 代理要单独留意

本节总结

开发服务器负责转换、HMR 与联调；代理只是其中网络适配层。

自测题

1. 为什么生产 Nginx 仍要单独配反代？

参考答案

server.proxy 不属于静态产物运行时；生产由真实网关处理路由。