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

Code°巧丽提问于 2026-03-22 12:56:23 阅读 18

工具

我在用 Vite 开发前端项目时，请求后端接口一直报跨域错误。本地启动的是 http://localhost:5173，而后端 API 地址是 http://localhost:3000/api。我按照文档在 vite.config.js 里加了 proxy 配置，但好像没生效，请求还是直接发到了 5173 端口。

我试过这样写配置：

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

但浏览器 Network 里看到请求 URL 还是 http://localhost:5173/api/login，根本没转发到 3000 端口，是我哪里配错了吗？

我来解答赞 2 收藏

反馈

2 条解答

司马国娟 Lv1

看起来你在配置 Vite 的代理时遇到了一些小问题。首先，确保你的代理配置在 vite.config.js 文件中是正确的。你提供的配置基本上是对的，但是 rewrite 函数里的路径替换可能不太对。试试这样改一下：

export default defineConfig({

  server: {

    proxy: {

      '/api': {

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

        changeOrigin: true,

        rewrite: (path) => path.replace(/^/api/, '')

      }

    }

  }

})

注意 rewrite 函数里的路径替换字符串前面加了个斜杠 /。这样配置后，所有以 /api 开头的请求都会被代理到 http://localhost:3000，并且路径中的 /api 会被移除。

另外，确保你的前端代码里请求的 URL 是正确的。如果你的请求 URL 是 http://localhost:5173/api/login，那代理应该会自动将其转发到 http://localhost:3000/login。检查一下你的请求代码，确保没有硬编码的端口号或者 URL 前缀。

最后，重启你的 Vite 开发服务器，有时候配置文件的修改需要重新启动服务才能生效。

记得在配置代理时，虽然这里的例子是简单的本地开发环境，但在生产环境中还是要特别小心，防止注入攻击等问题。确保你的代理配置不会暴露敏感信息或者允许未经授权的访问。

2026-03-25 08:11

Newb.忠娟 Lv1

检查一下你的请求路径，确保你在代码中请求的是 /api/login 而不是直接的 http://localhost:5173/api/login。路径要对上代理规则。

2026-03-22 13:05