在开发基于 Vue + Vite + tsx 项目时，将 Vite 版本由2升级到3，启动开发服务器后报错，经过排查发现是 proxy 的配置问题，将解决过程记录下来

错误信息

[vite] http proxy error at /api/v1/items/

Error: socket hang up

解决

vite.config.ts 中 proxy 配置新增changeOrigin

server:{
    proxy:{
      '/api/v1':{
        target:'接口服务器地址:3000/',
        changeOrigin: true,
      }
    }
  }

问题分析

根据 node-http-proxy中描述

changeOrigin: true/false, Default: false - changes the origin of the host header to the target URL

需要注意，changeOrigin字段修改的是 host 而非 origin

Host：请求将要发送到的主机名和端口号

Origin: 类似referer，表明请求来源，除GET和HEAD之外添加该请求标头

该字段设置为true主要解决虚拟主机的问题，与跨域无关。

如果设置为false，服务端接收到的请求头信息是

origin: 'http://localhost:5173'

host: 'localhost:5173'

如果设置为true，服务端接收到的请求头信息是

origin: 'http://localhost:5173'

host: 'localhost:3000'

Vite2 开启本地服务器地址为 localhost:3000，与 target 设置的接口服务器的地址一致（端口号都是3000），所以不会报错；而升级到 Vite3 后，默认端口号变化，导致请求失败返回错误状态码500。

那么，为什么浏览器端观察不到修改？

请求发送的时候 host 就是localhost:5173，发出去之后，被本地的代理服务拦截到了，在这个地方将 host 修改了，再发往后端服务器。也就是，host 修改时，浏览器已经将请求发出去了，所以观察不到。