阿里云域名+端口访问服务器中vue项目，解决invalid host header 错误

### 解决 Vue 项目中的 `Invalid Host header` 问题 当在开发环境中尝试通过外部网络访问本地运行的 Vue 应用程序时，可能会遇到 `Invalid Host header` 错误消息。这通常发生在使用内网穿透工具（如 ngrok 或 sunny-ngrok）将本地服务器暴露给互联网的情况下。 #### 修改配置文件 vue.config.js 为了允许来自特定域或所有域的请求，在项目的根目录下创建或编辑 `vue.config.js` 文件，并添加如下配置： ```javascript module.exports = { devServer: { allowedHosts: 'all', // 允许所有主机连接 proxy: { // 可选：如果需要代理某些 API 请求 '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: {'^/api' : ''} } } } } ``` 此方法适用于 Webpack 版本较新的情况，其中 `allowedHosts` 参数用于指定哪些主机可以访问开发服务器[^4]。 对于旧版本 Webpack，则可能需要设置 `disableHostCheck` 属性为 `true`: ```javascript devServer: { disableHostCheck: true, // 不推荐用于生产环境 } ``` 需要注意的是，出于安全考虑不建议在生产环境下禁用主机名验证；仅应在受信任的内部测试场景中启用该选项。 #### 配置 .env 开发环境变量 另一种方式是在 `.env.development` 文件里定义一个名为 VUE_APP_DEV_SERVER_HOST 的环境变量并将其设为你想要使用的自定义域名或者 IP 地址： ``` VUE_APP_DEV_SERVER_HOST=your-custom-domain.com ``` 接着修改 `vue.config.js` 如下所示： ```javascript const HOST = process.env.VUE_APP_DEV_SERVER_HOST || 'localhost'; module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: '', lintOnSave: false, devServer: { host: HOST, port: 8080, https: false, open: true, hotOnly: false, // ...其他配置项... }, }; ``` 这样做的好处是可以灵活切换不同的开发服务器地址而无需频繁更改源码。 ---