当ngrok尝试连接React开发服务器时出现无效的主机标头错误。

Question

当ngrok尝试连接React开发服务器时出现无效的主机标头错误。

358

我正在尝试在移动设备上测试我的React应用程序。我使用ngrok将本地服务器提供给其他设备，并且已经成功地与各种其他应用程序配合使用。但是，当我尝试将ngrok连接到React开发服务器时，会出现以下错误：

Invalid Host Header

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

- Patrick Connors

7个回答

40

选项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

2

请注意，在Webpack 5中，“disableHostCheck”似乎不再是“devServer”的有效键。相反，您应该使用allowedHosts：allowedHosts：['your.hostname.com']，或者更危险的allowedHosts：'all'。 - tryforceful

21

不知道为什么，但我尝试了所有方法都没有成功。最终对我有效的是这个： ngrok http https://localhost:4200 --host-header="localhost:4200" 这可能对其他人有用。

- DevJoe

2

我需要在 --host 中使用双破折号 ngrok http https://localhost:4200 --host-header="localhost:4200"。 - t q

@tq 在答案中修正了拼写错误。 - undefined

7

如果你使用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
},

- Qiulang

2

我在一款正常运行的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 {

    }
   }
  );
 }

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

- FlyingSnowGhost

1

Windows, ngrok v3

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

- sergredov

0

我附上了一张错误截图，但经过谷歌和文档搜索，我找到了确切的解决方案。

ngrok http 4200 --host-header="localhost:4200"

注意：我正在使用 Angular，所以使用了 4200 端口，但您可以根据您的要求选择端口。

#angular #ngrok #localhost

- Nagender Pratap Chauhan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- textual · Accepted Answer

我遇到了类似的问题，找到了两个解决方案，在直接在浏览器中查看应用程序方面都有效。

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

很明显，用你正在运行的端口号替换8080

当我在嵌入页面中使用它并从React应用程序中提取bundle.js时，此解决方案仍会引发错误。我认为由于它在嵌入式页面中重写了标题为localhost，因此它正在查找本地主机，而应用程序已不再运行。