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

188

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

Invalid Host Header

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

reactjs localhost ngrok

— 帕特里克·康纳斯
source

Answers:

551

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

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

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

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

— 文字的
source

第一个就够了

— Sudhir

万一其他人遇到这个问题：可以，但是似乎弄乱了cookie，这意味着它破坏了登录机制等等！

— pdowling

这个问题也是针对Angular 6的，并且有效，谢谢

— Druta Ruslan

本-host-header应该来的端口号之前，所以第一个例子应该是ngrok http -host-header="localhost:8080" 8080

— 肖恩豆

./ngrok http --host-header = rewrite 8080

— sreejith与

选项1

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

ngrok http 9000 --host-header =重写

要么

ngrok http 9000 --host-header =“ localhost：9000”

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

选项2

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

devServer: {
    disableHostCheck: true
}

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

— 彼得·吉舒克
source

我在可正常使用的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 {

    }
   }
  );
 }

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

— 飞雪鬼
source