一、Natapp介绍

内网穿透（NATAPP）简单来说，就是利用类似 natapp 这样的工具，在内网与外网之间建立一个安全的通信隧道。它能让位于防火墙或路由器后面的内网服务，被外网用户访问到。

二、需求

本地启动vue的前端服务，natapp绑定前端端口，供在外地或客户进行外网访问。

三、报错描述

本地前端服务启动，natapp也启动成功，通过生成的域名在浏览器中打开，报错： Invalid Host header

四、报错分析

**本地开发服务器（如 webpack-dev-server）出于安全校验，拒绝了 natapp 转发过来的 Host 头（公网域名），只信任 localhost/127.0.0.1**。

原因：

1.本地服务（Vue/React 等）用的是 webpack-dev-server。

2.它默认开启 Host 检查：请求的 Host 必须和 localhost:port 一致。

3.natapp 访问时，Host 是 xxx.natappfree.cc，和 localhost 不匹配，直接拦截并返回 Invalid Host header。

五、解决方法

1.允许所有 Host（开发环境最简单）

适用于：Vue CLI 4 及以下 / 旧版 webpack-dev-server

1
2
3
4
5
module.exports = {
  devServer: {
    disableHostCheck: true // 关闭 Host 校验
  }
}

2.只允许 natapp 域名（更安全）

1
2
3
4
5
6
// vue.config.js
module.exports = {
  devServer: {
    allowedHosts: [".natappfree.cc"] // 仅允许 natapp 二级域名
  }
}

3.启动时指定 host（配合上面配置）

1
npm run serve -- --host 0.0.0.0

让服务监听所有网卡，避免仅监听 127.0.0.1 导致转发失败。

4.临时方案：natapp 命令行覆盖 Host 头

1
natapp -authtoken=xxx -local=http://127.0.0.1:8080 -host=localhost

六、验证步骤

1.修改配置后重启本地 dev 服务（必须）。

2.重启 natapp 隧道。

3.访问 http://xxx.natappfree.cc，错误消失。

个人游戏开发

image-20250408192801332