Invalid Host header - 学至分享

问题出现背景

使用 ngrok 等工具，进行内网穿透调试时，打开网页显示：invalid host header

中文意思就是：无效的请求头。

在 vue 开发环境下，使用 npm run dev/serve 启动项目，实际就是启动 webpack-server 以供我们访问。webpack 有一个 host 检查功能，默认是不允许其他域名访问的。

1、允许部分域名访问

// vue.config.js
'use strict'

------.------- = {
	devServer: {
		allowedHosts: [
			'test.com', // 允许访问的域名
			'.test.com' // .是二级域名的通配符   
		]
	}
};

2、跳过检查

// vue.config.js
'use strict'

------.------- = {
	devServer: {
		disableHostCheck: true
	}
}

注意：必须要重启！必须要重启！必须要重启！