如何在不改配置文件的情况下搞定Vite的Host白名单
背景故事
最近在做一个项目，本地开发的时候遇到个挺烦人的问题。项目用的是Vite作为构建工具，本来本地开发一直好好的，直到有一天需要用域名访问本地服务，而不是localhost或者127.0.0.1。
结果浏览器直接给我甩了个错误：Host header check failed。这啥意思呢？简单说就是Vite觉得我这个访问地址不对，为了安全起见给拦截了。
按照常规思路，我打开vite.config.js，准备在server配置里加上allowedHosts。结果一看，这个配置文件是公司统一的模板，我不能随便改。这就尴尬了，改不了配置文件，但又得让它允许我的域名访问，这可咋整？
常规解法
咱们先说说常规的解法，也就是修改配置文件的方式。在vite.config.js里，一般会这么写：
export default defineConfig({
server: {
allowedHosts: ['baidu.com', 'example.com']
}
})
这样配置之后，访问baidu.com或者example.com就能通过了。但问题是，很多公司或者团队都有自己的脚手架，配置文件是统一的，你改了可能会影响别人，或者根本不让你动这个文件。
环境变量大法
好在Vite的开发团队早就想到了这个问题，留了个后门给我们用。咱们可以通过设置环境变量来解决这个问题，完全不需要动配置文件。
这个环境变量叫做 __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS，名字有点长，但记住它就行。使用方法也超级简单：
export __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=baidu.com
就这么一句话，然后在终端里执行它，再启动你的Vite开发服务器，就能通过baidu.com访问了。
多个域名咋整
一个域名不够用？没问题，用逗号分隔就行：
export __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=baidu.com,google.com,github.com
这样就能一次性添加多个域名了。是不是很方便？
永久设置
每次打开终端都要export一下是不是挺烦的？咱们可以把它加到shell配置文件里。如果你用的是bash，就在~/.bashrc或者~/.bash_profile里加上这一行；如果用的是zsh，就加到~/.zshrc里。
# 在你的配置文件末尾添加
export __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS=baidu.com
保存之后记得source一下，或者重新打开终端。
为啥这么设计
Vite这么设计其实挺有道理的。有些时候我们不想或者不能修改配置文件，比如：
- 公司统一脚手架：很多公司有自己的脚手架工具，配置文件是统一管理的，普通开发者没权限修改。
- 不同环境不同配置：本地开发、测试环境、预发布环境可能需要的域名都不一样，用一个固定的配置文件不够灵活。
- 临时调试需求：有时候只是临时需要访问某个域名，不值得改配置文件。
- 多开发者协作：每个人可能需要访问不同的域名，环境变量的方式可以让每个人自己配置，互不干扰。
注意事项
虽然这个方法很方便，但也有几点需要注意：
第一，这个环境变量前面是双下划线，不是单下划线。我第一次用的时候就因为写成了单下划线，半天没生效，查了好久才发现这个坑。
第二，域名不需要加协议，也不用加端口号。直接写 baidu.com 就行，不需要写 http://baidu.com 或者 baidu.com:3000。
第三，这个配置只对开发服务器生效，生产环境不需要这个配置。
第四，如果你已经在配置文件里设置了allowedHosts，这个环境变量会作为补充，不会覆盖原有的配置。这一点很好，不会互相冲突。
实际应用场景
我遇到这个问题的场景是这样的：项目需要在本地通过公司的内网域名访问，因为要对接其他系统的接口，而这些接口只允许特定域名的请求。这时候用localhost访问就会触发CORS或者白名单限制。
一开始我尝试修改vite.config.js，但发现这个文件是从模板生成的，gitignore了，每次npm install都会被覆盖。后来发现了环境变量这个方法，问题瞬间解决。
总结
Vite的这个小技巧确实很实用，特别是在不能或者不想修改配置文件的情况下。一行命令就能解决问题，简单又高效。
作为开发者，我们在实际工作中经常会遇到各种限制条件，这时候就需要我们了解工具的更多用法，找到绕过限制的技巧。像Vite这样的优秀工具，在设计上就考虑到了这些实际需求，提供了灵活的配置方式。
希望这篇文章能帮到遇到同样问题的你。如果你还有其他Vite相关的问题或者技巧，欢迎在评论区分享交流！