uniappInvalid Host/Origin header error :13086

### 如何解决 UniApp 中出现的 Invalid Host/Origin Header 错误

当开发 UniApp 应用并使用 Nginx 或其他方式配置反向代理时，可能会遇到 `Invalid Host header` 错误。这通常是因为应用的安全机制检测到来自不可信源的请求而触发。

#### 修改 `manifest.json` 文件中的 DevServer 设置

为了允许来自不同主机名的请求，在项目的根目录下找到 `manifest.json` 文件，并切换至源码视图。在此文件内增加如下所示的部分：

{
  ...
  "h5": {
    "devServer": {
      "disableHostCheck": true,
      "allowedHosts": [
        ".example.com"
      ]
    }
  },
  ...
}

上述 JSON 片段展示了如何通过设置 `"disableHostCheck"` 属性为 `true` 来关闭对主机名称验证的需求[^2]。另外还可以指定特定域名为可信站点列表的一部分，即 `"allowedHosts"` 数组内的条目。

请注意，虽然这种方法可以解决问题，但在生产环境中不建议完全禁用主机检查功能，因为这样做会降低应用程序安全性。对于正式上线的应用程序来说，应该只信任已知且合法的域名作为来源地址。

#### 使用环境变量替代直接修改配置文件

如果不想硬编码这些选项到 `manifest.json` 当中，则可以通过命令行参数的形式传递给 Webpack 开发服务器:

HOST=0.0.0.0 DISABLE_HOST_CHECK=true npm run dev:h5

这种方式同样能够达到相同的效果而不必更改任何项目内部配置文件的内容[^4]。

#### 调整Nginx配置实现跨域资源共享(CORS)

除了调整前端框架本身的设定外，也可以通过对后端服务（如Nginx）做出相应改动来支持更广泛的客户端连接。具体做法是在HTTP响应头部加入适当字段以表明哪些外部资源是可以被接受访问的：

location / {
    add_header 'Access-Control-Allow-Origin' '*';
    proxy_pass http://localhost:8080;
}

这段 NGINX 配置语句告诉浏览器允许所有网站加载由该位置路径提供服务的数据；当然实际操作过程中可以根据需求替换通配符(`*`)为目标的具体URL模式[^1]。