vite开发时跨域携带cookie的方法

前置背景

在写VITE项目时，需要对接后端调试，异步请求直接访问后端地址肯定触发跨域限制。于是就在网上搜索了一下解决方法，在项目根目录的vite.config.js的server配置项填写代理转发就行了。比如这样：

// 这里省略import引用

export default defineConfig({
  // 这里省略其他配置项
  server: {
    hmr: true,
    open: true,
    host: '192.168.233.66',
    port: 7894,
    proxy: {
      '/api': {
        target: 'http://api.abc.cn',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  }
})

问题所在

根据设置，VITE会捕捉http://192.168.233.66:7894/api开头的请求，将/api替换为空字符串，域名转为http://api.abc.cn，以实现代理转发。
一般情况下像上面那样的设置就可以了，但是对接的后端接口需要登录，登录完成后会在cookie派发sessionid。然后发现VITE代理转发时，做了301跳转，忽略了cookie。

解决过程

在网上没有找到有效的解决办法，于是看下VITE官方文档有没有什么线索。
在VITE的官方文档里在代理转发的部分也是写的很粗略，没有关于我的问题的解决方法。
不过官方文档这里有提到代理转发部分，实际用的是node-http-proxy插件，于是移步过去看下。
在这里发现了一个叫followRedirects的配置项，用于设置转发过程中，是否遵循重定向，默认是关闭的。
行了，症结就在这里。默认情况下，插件转发时走了301跳转，301是不会携带cookie的。开启followRedirects配置，node-http-proxy就会调用follow-redirects做转发，此时cookie就能原样转发到目标地址，类似于nginx的反向代理。

解决方法

在项目根目录的vite.config.js，server.proxy的配置里添加followRedirects，比如这样：

// 这里省略import引用

export default defineConfig({
  // 这里省略其他配置项
  server: {
    hmr: true,
    open: true,
    host: '192.168.233.66',
    port: 7894,
    proxy: {
      '/api': {
        target: 'http://api.abc.cn',
        changeOrigin: true,
        followRedirects: true,// 重点在这里
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  }
})

如此一来，经由VITE转发的请求，就不会走301跳转，也能携带cookie。