Ao acessar o projeto vue durante a penetração na intranet, a página informa "Cabeçalho de host inválido"

Solução para cabeçalho de host inválido

No caso do vue-cli versão 2.x:

Modifique o objeto webpack.dev.conf.jsna devServerjunçãodisableHostCheck: true

  devServer: {
    disableHostCheck: true,
  }

No caso do vue-cli versão 3.0:

Modifique vue.config.jsa configuração de

O primeiro

  module.exports = {
    devServer: {
      disableHostCheck: true
    }
  }

o segundo

Modifique vue.config.jsa configuração de

devServer: {
    allowedHosts: 'all',
}

Explicação: O meu é resolvido pelo segundo método

Antes da modificação vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      Object.assign(definitions[0]['process.env'], {
        NODE_HOST: '"http://localhost:8888"',
      });
      return definitions;
    });
  }
})

Modificado vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      Object.assign(definitions[0]['process.env'], {
        NODE_HOST: '"http://localhost:8888"',
      });
      return definitions;
    });
  },
  devServer: {
    allowedHosts: 'all',
  },
});

Para análise, você pode dar uma olhada neste artigo: http://t.csdn.cn/jLgxe