ViteJS 反向代理遇到的小坑

发布时间: 2024-10-18

有一个项目的后端正在陆陆续续重构着，期间需要将新旧 API 一起混用。而且我们都知道，Cookie 默认有同源策略，我们本地开发的环境下，域名地址一般为 localhost 或 127.0.0.1，而直接请求其他站点的接口，即便它返回了 Set-Cookie 头，你也会发现并没有作用。

注意：本篇教程适用于 Vite V2 版本，V3 版本不适用

使用反向代理

想要解决这类问题最简单的办法就是设置反向代理，使得多个来自不同站点的 API 聚合在同一个站点下。在服务器环境下最常见的解决方法就是使用 Nginx 的虚拟主机配置来实现，但在本地开发环境下这种操作就显得略微复杂，而且并不是所有前端都会用 Nginx（偏后端/运维）。幸运的是，ViteJS 内置了基于 node-http-proxy 实现的反向代理功能，平时开发我基本上都在用。

这是来自官方文档的示例，其中有一段写了 rewrite 参数的配置：

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

发现了问题

我起初也是参考着这个来的，写了一段将本地 /api 指向 https://paul.ren/api（脱敏）这样的配置，当我想要增加一个 /apiNew 的代理时，发现它并不起作用。

本文有些水，说白了，就是一条“小杠”酿大祸，想看结果可以直接往下跳过...

"/api": {
  target: "https://paul.ren/api",
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/api/, "")
},
"/apiNew": {
  target: "https://v2.paul.ren/api",
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/apiNew/, "")
}

然后页面访问 http://localhost:3300/apiNew/login（脱敏）接口后返回 404，这就奇怪了，为什么失败了呢？

排查流程

我首先想排查下 rewrite 参数干了什么。可 ViteJS 的文档上也没有给具体的说明，就翻了翻其源码，看起来是把我访问路由的 path 给替换了一波。

访问 `http://localhost:3300/apiNew/login`
得到 path `/apiNew/login`
rewrite 就是把 `/apiNew/login` 的 前缀去掉，变成 `/login`，
最后得到代理地址 `https://v2.paul.ren/api/login`

看起来我的设置是正确的，可实际访问确实如此吗？尝试过在配置项里面写 console.log 函数，没有用，就想着能不能让 ViteJS 把所有信息打印出来，这种情况肯定是属于异常行为了。

开启日志输出

在官方文档用关键词 debug 未果，换了个 log 去搜，有了新的答案，logLevel。

这个参数同样也在 vite.config.ts 里面设置，默认是 info，我改成 warn 之后，报错信息果然就出来了。

vite:proxy /apiNew/captcha/ -> https://paul.ren/api +0ms

可以看到，我访问 /apiNew，实际上走了 /api 的规则！一切水落石出了！这么一看，/apiNew 还确实符合 /api 这个规则...

解决方法

那解决办法就很清楚了，我把 /api 这条规则的适配改成 /api/，就无法匹配 /apiNew 了，最终我的配置项改成了这样子，问题也就成功解决咯！

"/api/": {
  target: "https://paul.ren/api/",
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/api/, "")
},
"/apiNew/": {
  target: "https://v2.paul.ren/api/",
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/apiNew/, "")
}

还有一个方法就是把这两个规则互相对调，也就是让 /apiNew 优先级更高，更快被匹配到，但是这样感觉做就是埋坑行为，规则一旦多起来就很麻烦了...

番外话

其实最开始是公司的实习生发现后端接口的 Cookie 没法设置上去，就私下开了个腾讯会议问我，我让她按我的方法设置反向代理之后就触发了这样一个问题了。说实话我对这个问题还蛮有兴趣，毕竟从一开始我就没明白 rewrite 这个参数是怎么用的，今天这样一出虽然耗费了将近一小时左右的时间，而且最终解决方案及其「简单粗暴」。但我感觉还是有些许意义的，以后遇到类似问题就多了一个好排查的点了。

黑海洋 - WIKI