Vite 中如何正确配置代理解决跨域问题？

欧阳一可提问于 2026-03-11 15:22:21 阅读 10

工具

我在本地开发时请求后端接口总是遇到跨域，试了在 vite.config.js 里加 proxy，但好像没生效，还是报 CORS 错误。

我这样配的：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})

前端请求用的是 fetch('/api/users')，但浏览器 Network 里看到请求还是直接发到 http://localhost:5173/api/users，根本没转发到 3000 端口，哪里出错了？

开发工具

我来解答赞 4 收藏

反馈

1 条解答

码农予曦 Lv1

问题应该出在配置本身没被正确加载，最常见的原因是修改完 vite.config.js 后没有重启开发服务器。Vite 的代理配置只有在启动时才会读取，你改完配置后需要把 dev server 完全停掉再重新启动。

检查一下你的配置文件名是不是 vite.config.js（或 .ts），要放在项目根目录。

然后我怀疑你可能对 rewrite 的理解有偏差。你现在的配置会把 /api/users 转发到 http://localhost:3000/users，如果你后端接口路径就是 /users 那这样配没问题。但如果你后端接口其实是 /api/users，那 rewrite 这步就多余了。

简化一下配置试试：

export default defineConfig({

  server: {

    proxy: {

      '/api': {

        target: 'http://localhost:3000',

        changeOrigin: true

      }

    }

  }

})

这样 /api/users 会被代理到 http://localhost:3000/api/users。

改完以后一定要重启 dev server，别只是保存文件就完事了。重启完打开浏览器开发者工具的 Network 面板，看请求的 Status 是不是 200，以及 Response 是不是从后端返回的数据。如果还是不行，把具体的报错信息贴出来看看。

2026-03-11 15:24