#Vite 反向代理

#1. 面试题

Q: 如何在 Vite 开发环境中解决跨域问题？proxy 配置怎么写？

#2. 核心解答

跨域 (CORS) 也适用于开发环境。虽然浏览器限制了 ajax 请求必须同源，但服务器之间的通讯不受限制。 Vite 基于 Node.js，可以开启一个 反向代理服务器 (Reverse Proxy Server)。

#(1) 配置 server.proxy

在 vite.config.ts 中配置代理规则：

export default defineConfig({
  server: {
    proxy: {
      '/api': { // 1. 匹配所有以 /api 开头的请求
        target: 'http://jsonplaceholder.typicode.com', // 2. 转发的目标服务器
        changeOrigin: true, // 3. 修改 Host 头，欺骗服务器你是从该域发出的
        rewrite: (path) => path.replace(/^\/api/, '') // 4. 重写路径 (去掉 /api 前缀)
      }
    }
  }
})

解释：

• 浏览器请求：http://localhost:3000/api/users。
• Vite 拦截：发现 /api 前缀。
• 转发给目标：http://jsonplaceholder.typicode.com/users (因为 rewrite 移除了 /api)。
• 收到响应：Vite 将响应转发给浏览器。
• 结果：浏览器以为是同一域下的请求，成功获取数据，没有跨域错误。

#(2) 生产环境怎么办？

这个配置仅在开发环境有效。如果你构建打包 (npm run build) 后部署到 Nginx 上，你需要配置 Nginx 的反向代理规则，和这里的逻辑是一样的。 或者如果是同域部署 (Same Origin)，就不需要代理了。

#3. 面试加分项

#Q:changeOrigin: true 是干嘛的？

有些后端服务器会检查请求头中的 Host 字段，以此来防止域名欺诈。如果 changeOrigin 为 false (默认)，发送过去的 Host 头就是 localhost:3000。后端可能直接拒绝。设置为 true 后，代理服务器会将 Host 头修改为目标服务器的域名 (jsonplaceholder.typicode.com)，让后端认为是一个合法的请求。

#4. 总结

• Dev: Node Proxy (Reverse Proxy).
• Config: target, changeOrigin, rewrite.
• Build: Configure Nginx similarly.