如何解决Vite代理在后端返回302重定向时路径缺失/api前缀的问题

问题背景 #

当前Vite代理配置如下，将带/api前缀的请求转发至后端服务http://localhost:8000，同时重写路径去掉/api前缀：

server: {
    port: 4200,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

但后端返回302重定向响应时，返回的Location URL不含/api前缀，前端直接跳转该URL后，因匹配不到Vite代理规则而出现404错误。

现有解决方案（需后端配合） #

你已通过添加自定义请求头proxy-prefix: /api，让后端在生成302重定向URL时主动拼接该前缀，配置如下：

proxy: {
  '/api': {
    target: 'http://localhost:8000',
    changeOrigin: true,
    headers: {"proxy-prefix": "/api"},
    rewrite: (path) => path.replace(/^\/api/, ''),
  },
},

该方案可行，但需要后端代码做对应修改，增加了前后端的耦合度。

更优解决方案（前端代理层处理，无需后端改动） #

利用Vite代理基于http-proxy的特性，通过onProxyRes钩子拦截后端响应，自动给302重定向的Location URL添加/api前缀：

配置示例 #

server: {
  port: 4200,
  host: 'localhost',
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
      // 拦截并修改后端响应头
      onProxyRes(proxyRes, req, res) {
        const location = proxyRes.headers['location'];
        // 仅处理302重定向的情况
        if (location && proxyRes.statusCode === 302) {
          // 处理相对路径的重定向URL
          if (!location.startsWith('http')) {
            proxyRes.headers['location'] = '/api' + location;
          } else {
            // 处理完整URL形式的重定向（提取路径和参数部分）
            const urlObj = new URL(location);
            proxyRes.headers['location'] = '/api' + urlObj.pathname + urlObj.search;
          }
        }
      }
    },
  },
},

方案优势 #

• 无需修改任何后端代码，所有逻辑在前端代理层完成，保持前后端解耦；
• 自动适配相对路径和完整URL两种形式的重定向地址；
• 不影响其他类型的响应，仅针对302重定向做处理。

内容的提问来源于stack exchange，提问作者KIC