我正在尝试在移动设备上测试我的 React 应用程序。我正在使用 ngrok 使我的本地服务器可用于其他设备,并使其与各种其他应用程序一起使用。但是,当我尝试将 ngrok 连接到 React 开发服务器时,出现错误:
Invalid Host Header
我相信 React 默认会阻止来自另一个来源的所有请求。有什么想法吗?
我正在尝试在移动设备上测试我的 React 应用程序。我正在使用 ngrok 使我的本地服务器可用于其他设备,并使其与各种其他应用程序一起使用。但是,当我尝试将 ngrok 连接到 React 开发服务器时,出现错误:
Invalid Host Header
我相信 React 默认会阻止来自另一个来源的所有请求。有什么想法吗?
我遇到了类似的问题,并找到了两个解决方案,只要直接在浏览器中查看应用程序
ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080
显然用你正在运行的任何端口替换 8080
当我在嵌入式页面中使用这个解决方案时,这个解决方案仍然会引发错误,从 react 应用程序中提取 bundle.js。我认为因为它将标头重写为本地主机,所以当它被嵌入时,它正在寻找本地主机,该应用程序不再运行
选项1
如果您不需要使用身份验证,您可以将配置添加到 ngrok 命令
ngrok http 9000 --host-header=rewrite
或者
ngrok http 9000 --host-header="localhost:9000"
但在这种情况下,身份验证在您的网站上不起作用,因为 ngrok 重写标头和会话对您的 ngrok 域无效
选项 2
如果你使用 webpack 你可以添加以下配置
devServer: {
disableHostCheck: true
}
在这种情况下,身份验证标头将对您的 ngrok 域有效
不知道为什么,但尝试了所有方法,但对我不起作用。最终对我有用的是:ngrok http https://localhost:4200 -host-header="localhost:4200"
它可能对某人有用
如果你使用 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
},