Vite开发服务器代理配置后请求还是被浏览器拦截怎么办？

开发者含含提问于 2026-02-05 14:00:32 阅读 50

工具

用Vite+React前端配合Express后端开发时，后端接口跑在http://localhost:3001，前端开发服务器是http://localhost:3000。当我发起fetch('/api/data')请求时，浏览器还是报跨域错误：


// vite.config.js里的代理配置是这样的
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})

明明按照文档配置了代理，为什么控制台还是显示No 'Access-Control-Allow-Origin' header present？Express服务器已经用了cors()中间件，但好像没起作用…

开发工具构建工具

我来解答赞 10 收藏

反馈

2 条解答

端木誉馨 Lv1

你这个配置有个小问题，代理确实能转发请求，但看起来 Express 那边可能还是收到了带跨域头的预检请求（OPTIONS），而你的 Vite 代理没处理好路径重写逻辑。

先说重点：你的 rewrite 函数写错了。这行：

path.replace(/^/api/, '')

正则写反了，应该是 /^/api/ 才对，而且替换逻辑也不太稳。另外，如果前端请求的是 /api/data，代理会转发到 http://localhost:3001/api/data，但你可能希望后端实际接收的是 /data，所以需要正确去掉前缀。

把 proxy 改成这样：

proxy: {

  '/api': {

    target: 'http://localhost:3001',

    changeOrigin: true,

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

  }

}

注意是 ^/api，不是 ^/api，少了个反斜杠转义，JavaScript 字符串里得写成 /^/api/ 或者用字符串形式。

然后重启 Vite 开发服务器。别忘了检查你前端 fetch 的时候是不是用了完整 URL，比如写了 http://localhost:3001/api/data，那就绕过代理了，必须用相对路径：fetch('/api/data')。

至于 Express 的 cors 中间件，如果你已经用了 app.use(cors())，那在被代理的情况下其实是不需要的——因为浏览器请求根本没直接打到 Express，而是通过 Vite 转发的，不会触发跨域。只要代理配对了，就不会有 OPTIONS 预检，自然也不会报那个 header 缺失的问题。

你现在看到的跨域错误，大概率是因为代理没生效，请求实际上还是发到了 3001 端口，可能是配置没生效或者改完没重启。

总结下解决步骤：

1. 修正 rewrite 正则
2. 确保 vite 配置文件改动已保存并重启 dev server
3. 前端用相对路径请求 /api/xxx
4. 打开网络面板，看请求是否发到了 3000 端口且被代理转发（状态码 200），而不是直接打到 3001 报错

可以优化成更健壮的写法，比如加上 secure: false 和 logLevel，方便调试：

proxy: {

  '/api': {

    target: 'http://localhost:3001',

    changeOrigin: true,

    secure: false,

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

    configure: (proxy, options) => {

      console.log('proxying /api to', options.target)

    }

  }

}

这样至少能看清有没有进代理。搞定收工。

2026-02-10 18:06

瑄旗（打工版） Lv1

代理配置写错了，rewrite函数里的正则有问题
直接改成这样：

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

浏览器报错是因为代理没生效，实际请求还是走的前端域名，跨域问题自然存在
Express那边的cors()中间件是对的，现在这个情况根本没走到那一步
改完代理配置重启Vite试试，别忘了开发工具要关掉缓存

2026-02-05 14:03