JavaScript 中怎么在 Vite 中配置代理解决开发阶段的跨域问题-js教程-PHP中文网

vite代理本质是开发服务器转发请求以绕过同源策略，配置在vite.config.ts的server.proxy中，路径前缀匹配并默认去除，支持rewrite重写和多级代理，仅开发阶段生效。

javascript 中怎么在 vite 中配置代理解决开发阶段的跨域问题

在 Vite 中配置代理，本质是利用开发服务器（基于 connect 和 http-proxy-middleware）将前端请求转发到后端服务，从而绕过浏览器同源策略限制。关键不是改请求地址，而是让 Vite 开发服务器“代你发请求”。

代理配置写在 `vite.config.ts`（或 `.js`）里

代理规则通过 server.proxy 选项设置，它是一个对象，键是需要代理的路径前缀，值是代理目标及行为配置。

路径匹配是前缀匹配：比如 /api 会匹配 /api/user、/api/orders/1
默认会把匹配到的前缀去掉再转发（即“重写”），例如请求 /api/users 会被转发为 http://localhost:3000/users
若后端接口本身也带 /api 前缀，需手动保留——用 rewrite 函数控制

基础代理示例：转发所有 `/api` 请求到本地后端

假设后端运行在 http://localhost:3000，且接口路径如 /api/login：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true, // 修改 Origin 头，避免后端校验失败
        secure: false,      // 若后端是 http（非 https），设为 false
      }
    }
  }
})

此时前端调用 fetch('/api/login')，Vite 开发服务器会将其转发至 http://localhost:3000/api/login。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

进阶：路径重写与多级代理

如果后端接口没有 /api 前缀（比如直接是 /login），而你希望前端仍用 /api/login 调用，就要去掉前缀：

'/api': {
  target: 'http://localhost:3000',
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/api/, '') // 把 /api 替换为空
}

也可以同时配置多个代理，比如区分管理后台和用户接口：

proxy: {
  '/admin': {
    target: 'http://localhost:8001',
    changeOrigin: true,
  },
  '/user': {
    target: 'http://localhost:8002',
    changeOrigin: true,
  }
}