当ngrok尝试连接到React dev服务器时,无效的主机头

Question

我正在尝试在移动设备上测试我的React应用程序.我正在使用ngrok使我的本地服务器可用于其他设备,并且已经将其用于各种其他应用程序.但是,当我尝试将ngrok连接到React dev服务器时,我收到错误:

Invalid Host Header 

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

Answer 1

我遇到类似的问题,发现两个解决方案可以直接在浏览器中查看应用程序

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

显然用你正在运行的任何端口取代8080

当我在嵌入页面中使用它时,这个解决方案仍会引发错误,从反应应用程序中提取bundle.js.我认为,因为它将标题重写为localhost,当嵌入它时,它寻找localhost,该应用程序不再运行

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 域有效

Answer 3

不知道为什么，但尝试了一切，但对我不起作用。最终对我有用的是： ngrok http https://localhost:4200 --host-header="localhost:4200"

这可能对某人有用

Answer 4

如果你使用 webpack devServer 最简单的方法是设置disableHostCheck，像这样检查webpack 文档

devServer: {
    contentBase: path.join(__dirname, './dist'),
    compress: true,
    host: 'localhost',
    // host: '0.0.0.0',
    port: 8080,
    disableHostCheck: true //for ngrok
},