我正在尝试在移动设备上测试我的 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。我认为因为它在嵌入时将标头重写为 localhost,所以它正在查找 localhost,该应用程序不再在该主机上运行
选项一
如果您不需要使用身份验证,您可以将配置添加到 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
},
我在一个有效的 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 {
}
}
);
}
如果您没有自定义域,请不要传递子域
ngrok http <url> --host-header=<host>:<port>