如果你使用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 8080 --host-header="localhost:8080"
ngrok http --host-header=rewrite 8080

显然，将8080替换为您正在运行的任何端口

当我在一个嵌入式页面中使用这个时，这个解决方案仍然会引发一个错误，从react应用程序中拉bundle.js。我认为，因为它在嵌入时重写了头文件到localhost，它正在寻找localhost，应用程序不再运行

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

它可能对某人有用

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