选项1

如果你不需要使用身份验证，你可以在ngrok命令中添加配置

Ngrok HTTP 9000——host-header=重写

or

ngrok有9000 -- -- -- localhost = - 9000

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

选项2

如果你正在使用webpack，你可以添加以下配置

devServer: {
    disableHostCheck: true
}

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

Windows, ngrok v3

ngrok http <url> --host-header=<host>:<port>

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

选项1

如果你不需要使用身份验证，你可以在ngrok命令中添加配置

Ngrok HTTP 9000——host-header=重写

or

ngrok有9000 -- -- -- localhost = - 9000

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

选项2

如果你正在使用webpack，你可以添加以下配置

devServer: {
    disableHostCheck: true
}

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

不知道为什么，但我尝试了所有的方法，对我来说都不奏效。 最后对我有用的是: Ngrok HTTP https://localhost:4200 -host-header="localhost:4200"

它可能对某人有用

我在一个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 {

    }
   }
  );
 }

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