[!info] 关联笔记

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

Vite 开发服务器与代理

这个概念为什么出现

浏览器同源策略会挡住 localhost:5173 调 localhost:3000。开发期用 dev server 代理把 /api 转到后端，让相对路径请求“看起来同源”。

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

最小示例

import { defineConfig } from 'vite'

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

export function fetchSku(id: string) {
  return fetch('/api/skus/' + id).then((r) => r.json())
}

关注点

• 仅 dev 生效
• cookie 域名/路径可能需额外配置
• WebSocket 代理要单独留意

本节总结

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

自测题

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

参考答案

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