Vite开发服务器如何代理API请求到本地Node.js后端？

Air-明月提问于 2026-01-29 10:23:30 阅读 37

工具

我在用Vite开发前端时需要对接本地Node.js后端，按文档配置了vite.config.js的代理，但请求还是被跨域拦截。配置了：


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

前端请求/api/users时浏览器提示CORS错误，抓包发现请求直接发到了前端服务器的端口而不是代理到3000端口。尝试过把路径改成绝对地址和调整headers都没用，这是哪里配置错了？

开发工具

我来解答赞 12 收藏

反馈

2 条解答

Newb.浩宇 Lv1

代理配置里的 rewrite 函数写错了，应该把路径中的 /api 去掉，改成 path.replace(/^/api/, '')，这样 /api/users 才会被正确代理到 http://localhost:3000/users。

抓包发现请求没走代理，说明代理没生效，可能是请求路径和代理前缀不匹配，检查前端请求的路径是否确实以 /api 开头，比如 fetch('/api/users')。

另外确保你的 Vite 配置文件里没有拼写错误，比如 server.proxy 是否正确嵌套在 defineConfig 里面，代理只在开发环境生效，生产环境需要你自己配置反向代理。

2026-02-07 08:12

玉翠 Dev Lv1

问题出在你的 rewrite 函数逻辑上，这里把 /api 去掉得太彻底了，导致后端接收到的路径不对。而且你可能忽略了浏览器缓存或者其他配置冲突。

正确的 vite.config.js 配置应该是这样：

import { defineConfig } from 'vite'



export default defineConfig({

  server: {

    proxy: {

      '/api': {

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

        changeOrigin: true,

        rewrite: (path) => path.replace(/^/api/, '') // 注意这里保留根路径

      }

    }

  }

})

重点检查以下几点：
1. 确保前端请求的 URL 是 /api/users，不要带主机名。
2. 如果后端有 CORS 插件，暂时关闭它，确保代理生效后再重新配置。
3. 清除浏览器缓存或换个隐身模式试试，避免缓存干扰。

最后再提醒下，changeOrigin: true 很关键，确保主机头正确转发到后端。如果还是有问题，可以直接抓个包看看实际请求地址对不对。

2026-01-29 19:18