ngrok start --all启动多隧道时前端报invalid host header如何重写host头

你之前单隧道启动时使用的-host-header="localhost:3000"命令行参数，在yml配置多隧道的场景下，可以直接作为配置项写入对应前端隧道的规则块中，不需要调整启动命令。

修改后的正确配置 #

打开你的ngrok.yml文件，给指向3000端口React服务的隧道新增host_header字段，完整配置如下：

tunnels:
  first:
    addr: 3000
    proto: http
    host_header: "localhost:3000"
  second:
    addr: 5000
    proto: http

配置生效逻辑 #

• 这个配置项和你之前单隧道启动时加的命令行参数效果完全一致：ngrok把公网请求转发到本地3000端口时，会自动将请求的Host头重写为localhost:3000，通过React开发服务器的默认Host校验，直接解决invalid host header报错。
• 指向5000端口的Node.js后端服务如果没有特殊的Host校验规则，不需要添加该配置，保持原有配置即可。

配置修改保存后，直接执行你原来的启动命令ngrok start --all，就能同时正常对外暴露前后端两个服务，不需要额外附加其他参数。

可选替代方案：如果你的React项目是基于react-scripts启动的，也可以在项目根目录新建.env.development文件，添加配置DANGEROUSLY_DISABLE_HOST_CHECK=true直接关闭开发服务器的Host校验，但这种方式会降低本地服务的安全性，优先推荐使用ngrok侧重写Host头的方案。

内容的提问来源于stack exchange，提问作者imim