当 ngrok 尝试连接到 React 开发服务器时，主机标头无效

Question

我正在尝试在移动设备上测试我的 React 应用程序。我正在使用 ngrok 使我的本地服务器可用于其他设备，并已使其与各种其他应用程序一起使用。但是，当我尝试将 ngrok 连接到 React 开发服务器时，我收到错误消息：

 Invalid Host Header

我相信 React 默认会阻止来自其他来源的所有请求。有什么想法吗？

原文由 Patrick Connors 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到了类似的问题，并找到了两种可以直接在浏览器中查看应用程序的解决方案

ngrok http 8080 --host-header="localhost:8080"
ngrok http --host-header=rewrite 8080

显然，用您正在运行的任何端口替换 8080

当我在嵌入式页面中使用此解决方案时，此解决方案仍然会引发错误，这会从反应应用程序中提取 bundle.js。我认为，由于它在嵌入时将标头重写为 localhost，因此它正在寻找应用程序不再运行的 localhost

原文由 textual 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

选项1

如果您不需要使用身份验证，您可以将配置添加到 ngrok 命令

ngrok http 9000 –host-header=rewrite

要么

ngrok http 9000 –host-header=“localhost:9000”

但在这种情况下，身份验证将无法在您的网站上运行，因为 ngrok 重写标头和会话对您的 ngrok 域无效

选项 2

如果您使用的是 webpack，则可以添加以下配置

devServer: {
    disableHostCheck: true
}

在这种情况下，身份验证标头将对您的 ngrok 域有效

原文由 Peter Gyschuk 发布，翻译遵循 CC BY-SA 4.0 许可协议