Nginx代理Vue项目出现Invalid Host header问题及解决

说明

使用 Nginx 的 upstream 对 Vue 项目做负载均衡时，代理的地址无法访问目标地址

且页面报错：

Invalid Host header（无效主机头）

分析

检查 Nginx 的 nginx.conf 配置，如下：

upstream sail{
	server 127.0.0.1:8080;
}

server {
	listen       8081;
	server_name  localhost;
	
	location / {
    	root   html;
    	index  index.html index.htm;
    	proxy_pass http://sail;
    }
}

反复检查后没有问题，排除了 Nginx 层面的问题。

那只能是 Vue 项目配置的问题了，最后发现是由于 Vue 的主机检查配置导致的。

解决

1. 找到 Vue 项目中的 build 目录下的 webpack.dev.js 文件。
2. 在 devServer 下添加 disableHostCheck: true ，即跳过检查，如此访问 Vue 项目时就不会进行主机检查。
3. 重启项目。

再次访问就能代理到目标地址了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。