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

我试图在移动设备上测试我的React应用程序。我正在使用ngrok使我的本地服务器可用于其他设备，并已使其与各种其他应用程序一起工作。然而，当我尝试将ngrok连接到React开发服务器时，我得到了错误:

Invalid Host Header

我相信React会默认阻止所有来自其他源的请求。任何想法吗?

189931 次浏览
小开
最佳答案

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

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

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

当我在一个嵌入式页面中使用这个时，这个解决方案仍然会引发一个错误，从react应用程序中拉bundle.js。我认为，因为它在嵌入时重写了头文件到localhost，它正在寻找localhost，应用程序不再运行

小开

我在一个react应用程序中使用了这个设置。我创建了一个名为configstrp.js的配置文件，其中包含以下内容:

module.exports = {
ngrok: {
// use the local frontend port to connect
enabled: process.env.NODE_ENV !== 'production',
port: process.env.PORT || 3000,
subdomain: process.env.NGROK_SUBDOMAIN,
authtoken: process.env.NGROK_AUTHTOKEN
},   }

需要服务器中的文件。

const configstrp      = require('./config/configstrp.js');
const ngrok = configstrp.ngrok.enabled ? require('ngrok') : null;

这样的联系

if (ngrok) {
console.log('If nGronk')
ngrok.connect(
{
addr: configstrp.ngrok.port,
subdomain: configstrp.ngrok.subdomain,
authtoken: configstrp.ngrok.authtoken,
host_header:3000
},
(err, url) => {
if (err) {


} else {


}
}
);
}

如果没有自定义域，不要传递子域

小开

选项1

如果你不需要使用身份验证，你可以在ngrok命令中添加配置

Ngrok HTTP 9000——host-header=重写

或

Ngrok HTTP 9000——host-header="localhost:9000"

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

选项2

如果你正在使用webpack，你可以添加以下配置

devServer: {
disableHostCheck: true
}

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

小开

如果你使用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
},
小开
我不知道为什么，但我尝试了所有的方法，但对我来说都不奏效。 最后对我有用的是: ngrok http https://localhost:4200 -host-header="localhost:4200" < / p >

它可能对某人有用

小开

Windows, ngrok v3

ngrok http <url> --host-header=<host>:<port>

提交答案