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

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

Answer 4

我在可正常使用的react应用中使用了此设置。我创建了一个名为configstrp.js的配置文件，其中包含以下内容：

open = df.Open.resample('W-MON').last()
print (open.tail(5))
Date
2018-11-12    10607.80
2018-11-19    10731.25
2018-11-26    10568.30
2018-12-03    10892.10
Freq: W-MON, Name: Open, dtype: float64

close = df.Close.resample('W-FRI').last().shift(-4, freq='D')
print (close.tail(5))
Date
2018-11-12    10682.20
2018-11-19    10526.75
2018-11-26    10876.75
Freq: W-MON, Name: Close, dtype: float64

weekly_data = pd.concat([open, close], axis=1)
print (weekly_data)
                Open     Close
Date                          
2018-11-12  10607.80  10682.20
2018-11-19  10731.25  10526.75
2018-11-26  10568.30  10876.75
2018-12-03  10892.10       NaN

需要服务器中的文件。

from turtle import Screen, Turtle

def drag(x, y):
    default.ondrag(None)  # disable handler inside handler

    default.goto(x, y)

    if default.distance(scar) < 40:
        default.shape('turtle')
    elif default.shape() == 'turtle':
        default.shape('circle')

    default.ondrag(drag)

wn = Screen()
wn.setup(500, 500)

scar = Turtle('square', visible=False)
scar.shapesize(4)
scar.color('pink')
scar.penup()
scar.left(90)
scar.forward(50)
scar.showturtle()

default = Turtle('circle', visible=False)
default.shapesize(2)
default.speed('fastest')
default.penup()
default.left(90)
default.backward(50)
default.showturtle()

default.ondrag(drag)

wn.mainloop()

并以此连接

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
},   }

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

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

4 个答案: