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

【问题标题】：Invalid Host Header when ngrok tries to connect to React dev server当 ngrok 尝试连接到 React 开发服务器时，主机标头无效
【发布时间】：2023-03-26 23:05:01
【问题描述】：

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

Invalid Host Header

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

【问题讨论】：

标签： reactjs localhost ngrok

【解决方案1】：

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

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

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

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

【讨论】：

第一个就够了
万一其他人遇到这个问题：这可行，但它似乎弄乱了 cookie，这意味着它破坏了登录机制等！
-host-header 应该在端口号之前，所以第一个例子应该是ngrok http -host-header="localhost:8080" 8080
./ngrok http --host-header=rewrite 8080
@pdowling 我遇到了这个问题。有没有办法不破坏登录功能？我目前正在尝试使用我的应用程序为 facebook 构建登录/注销功能，它有时但不是全部有效，我不知道这是我的代码还是 ngrok stackoverflow.com/questions/59522085/…

【解决方案2】：

选项 1

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

ngrok http 9000 --host-header=rewrite

或

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

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

选项 2

如果你使用的是 webpack 可以添加如下配置

devServer: {
    disableHostCheck: true
}

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

【讨论】：

【解决方案3】：

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

它可能对某人有用

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我在一个有效的反应应用程序中使用了这个设置。我创建了一个名为 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 {

    }
   }
  );
 }

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

【讨论】：