Vite开发时代理请求到后端，但刷新页面后请求地址变成绝对路径怎么办？

UI馨予提问于 2026-02-18 19:06:26 阅读 7

工具

我在用Vite搭建React项目时配置了代理，开发环境访问/api/*都会代理到localhost:3000。但当我直接访问带有路由参数的页面（比如/user/123），刷新后发起的请求变成了http://localhost:3000/api/user/123，导致后端返回404。明明配置里已经写了rewrite…


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

我已经按照文档配置了rewrite规则，但为什么刷新页面后代理失效了？是不是和路由模式有关？求大神指点具体排查方向…

Vite

我来解答赞 4 收藏

反馈

1 条解答

技术诗雯 Lv1

这个问题确实和路由模式有关系，尤其是你用的是 React 的前端路由。问题的核心在于，刷新页面时浏览器直接向服务器发起请求，而你的后端并没有配置对应的路由规则，所以代理还没生效就 404 了。

解决方法其实很简单，分两步走：

第一步，确保你的 Vite 配置没问题。你现在的 proxy 配置基本是对的，但要注意 rewrite 函数里的正则表达式，/^/api/ 这里需要转义成 /^/api/ ，不然可能会匹配失败。改完后大概是这样：

export default defineConfig({

  server: {

    proxy: {

      '/api': {

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

        changeOrigin: true,

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

      }

    }

  }

})

第二步，也是最关键的一步，是处理前端路由的问题。如果你用的是 React Router 的 history 模式（也就是不带 hash 的那种），你需要在开发服务器和生产环境都配置一个 fallback。Vite 默认会在开发环境下返回 index.html，但有时候这个行为会被代理规则覆盖，导致刷新时请求直接被发到后端。

在 Vite 的配置里加一个 middlewareMode 设置，确保所有未匹配的路径都返回 index.html：

export default defineConfig({

  server: {

    proxy: {

      '/api': {

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

        changeOrigin: true,

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

      }

    },

    middlewareMode: 'ssr'

  }

})

然后在你的 React 项目里，确认路由配置没问题，比如动态路由 /user/:id 是能正常匹配的。如果还是有问题，检查一下是不是后端也配了类似的代理或者重写规则，导致冲突。

最后吐槽一句，这种问题真的是开发环境特有的坑，生产环境一般 Nginx 或者其他 Web 服务器都会帮你搞定 fallback，但在 Vite 里就得自己多留意一下了。

2026-02-18 19:08