Estou recebendo uma mensagem de "cabeçalho de host inválido" ao executar meu aplicativo React em um servidor de desenvolvimento Webpack no Cloud9.io

176

Estou usando como ambiente um IDE on-line VM do Cloud9.io ubuntu e reduzi ao solucionar esse erro apenas executando o aplicativo com o servidor de desenvolvimento Webpack.

Eu inicio com:

webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$ IP é uma variável que possui o endereço do host $ PORT e o número da porta.

Sou instruído a usar esses vars ao implantar um aplicativo no Cloud 9, pois eles têm as informações padrão de IP e PORT.

O servidor é inicializado e compila o código, sem problemas, embora não esteja me mostrando o arquivo de índice. Somente uma tela em branco com "Cabeçalho de host inválido" como texto.

Esta é a solicitação:

GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

Este é o meu package.json:

{
  "name": "workspace",
  "version": "0.0.0",
  "scripts": {
    "dev": "webpack -d --watch",
    "server": "webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT",
    "build": "webpack --config webpack.config.js"
  },
  "author": "Artur Vieira",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "file-loader": "^0.11.1",
    "node-fetch": "^1.6.3",
    "react": "^15.5.4",
    "react-bootstrap": "^0.30.9",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4",
    "whatwg-fetch": "^2.0.3"
  }
}

Este é o webpack.config.js:

const path = require('path');

module.exports = {

  entry: ['whatwg-fetch', "./app/_app.jsx"], // string | object | array
  // Here the application starts executing
  // and webpack starts bundling
  output: {
    // options related to how webpack emits results

    path: path.resolve(__dirname, "./public"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js", // string
    // the filename template for entry chunks

    publicPath: "/public/", // string
    // the url to the output directory resolved relative to the HTML page
  },

  module: {
    // configuration regarding modules

    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "./app")
        ],
        exclude: [
          path.resolve(__dirname, "./node_modules")
        ],
        loader: "babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },

  devServer: {
    compress: true
  }
}

O servidor de desenvolvimento Webpack está retornando isso devido à minha configuração de host. Na linha 60 do webpack-dev-server / lib / Server.js. Em https://github.com/webpack/webpack-dev-server

Minha pergunta é como configurar para passar corretamente nesta verificação. Qualquer ajuda seria muito apreciada.

Artur Vieira
fonte
Parece que o problema está fora do escopo comentado.
Elmeister
Eu não entendo como o problema está acontecendo. Você poderia me apontar na direção certa?
Artur Vieira
Bem, no meu caso, a resposta principal funcionou.
MrMesees 16/03/19

Respostas:

311

O problema ocorre porque o webpack-dev-server2.4.4 adiciona uma verificação de host. Você pode desativá-lo adicionando isso à sua configuração do webpack:

 devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it

 }      

EDIT: observe, essa correção é insegura.

Consulte a seguinte resposta para obter uma solução segura: https://stackoverflow.com/a/43621275/5425585

刘芳友
fonte
13
Este é um problema de segurança. Use a opção pública para especificar o nome do host permitido. Consulte medium.com/webpack/… para obter mais informações.
SystemParadox #
5
opção pública por si só não funcionou para mim ... disableHostCheck é a única coisa que resolveu: \
davidkomer
@davidkomer mesmo para mim. A única coisa que funciona é disableHostCheck ...
irl_irl
6
É um problema de segurança se você estiver usando o servidor de desenvolvimento webpack para algo diferente de desenvolvedor local.
AlienWebguy
Isso funcionou para mim também. Meu caso foi que eu estava usando uma instalação Bitnami Multisite Worpdress, veiculada em 192.168.0.106.xip.io. O que é estranho é que eu fui capaz de trabalhar na minha antiga instalação do Apache Linux sem essa "correção" muito bem. Não foi até mudar para o pacote Bitnami que esse problema apareceu.
Hybrid web dev
103

Descobri que preciso definir a publicpropriedade devServer para o valor do host da minha solicitação. Sendo que será exibido nesse endereço externo.

Então, eu precisava disso no meu webpack.config.js

devServer: {
  compress: true,
  public: 'store-client-nestroia1.c9users.io' // That solved it
}

Outra solução é usá-lo na CLI:

webpack-dev-server --public $ C9_HOSTNAME <- var para IP externo do Cloud9

Artur Vieira
fonte
1
Encontrou isso hoje também! Obrigado por postar!
precisa saber é o seguinte
5
Também acabei de encontrar isso hoje. Parece que webpack-dev-serveressa alteração foi feita recentemente, exigindo o cabeçalho do host correto. Veja github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 para obter mais informações.
Kaitrono
2
A mudança afeta o webpack-dev-server 1.16.4 também. Você pode ler mais sobre isso aqui: medium.com/webpack/… .
Tyler Collier
1
Isso funcionou para mim também quando encontrei o Invalid Host headererro em um projeto vue cli.
Timmy Von Heiss
43

Isto é o que funcionou para mim:

Adicione allowedHosts no devServer no seu webpack.config.js:

devServer: {
  compress: true,
  inline: true,
  port: '8080',
  allowedHosts: [
      '.amazonaws.com'
  ]
},

Não precisei usar os parâmetros --host ou --public.

irl_irl
fonte
Se você tem o HotModuleReload, parece que o publicparâmetro é o que define o URL usado como destino para isso (se não conseguir adivinhar como a página é veiculada, o que para mim não poderia).
Tom Saleeba
15

Adicione essa configuração ao seu arquivo de configuração do webpack ao usar o webpack-dev-server (você ainda pode especificar o host como 0.0.0.0).

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}
Sampath
fonte
2
Isso também funciona para a nova configuração do Vue.js vue-cli: github.com/vuejs/vue-cli/blob/dev/docs/config.md
CenterOrbit
9

A opção mais segura seria adicionar HOSTS permitidos à sua configuração do Webpack assim:

module.exports = {
devServer: {
 allowedHosts: [
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  'host2.com'
   ]
  }
};

A matriz contém todos os hosts permitidos, você também pode especificar subdomínios. confira mais aqui

AV Paul
fonte
5

Se você ainda não foi ejetado do CRA, não poderá modificar facilmente sua configuração do webpack. O arquivo de configuração está oculto node_modules/react_scripts/config/webpackDevServer.config.js. Você está desanimado em alterar essa configuração.

Em vez disso, você pode apenas definir a variável de ambiente DANGEROUSLY_DISABLE_HOST_CHECKpara truedesativar a verificação de host:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command
Lukas Kalbertodt
fonte
1
Obrigado, Lukas Kalbertodt, melhor resposta. Eu usei: export DANGEROUSLY_DISABLE_HOST_CHECK = true; npm start
Mark Kahn
3

Em vez de editar o arquivo de configuração do webpack, a maneira mais fácil de desativar a verificação do host é adicionando um .envarquivo à sua pasta raiz e colocando isto:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Como o nome da variável implica, desativá-lo é inseguro e é aconselhável usar somente no ambiente de desenvolvimento.

Kyle Ordona
fonte
2

Se você estiver usando o create-react-app no ​​C9, execute este comando para iniciar

npm run start --public $C9_HOSTNAME

E acesse o aplicativo de qualquer que seja o seu nome de host (por exemplo, digite $C_HOSTNAMEo terminal para obter o nome do host)

rex
fonte
0

Se você estiver executando webpack-dev-serverem um contêiner e enviando solicitações a ele por meio do nome do contêiner, você receberá esse erro. Para permitir solicitações de outros contêineres na mesma rede, simplesmente forneça o nome do contêiner (ou qualquer outro nome usado para resolver o contêiner) usando a --publicopção Isso é melhor do que desativar totalmente a verificação de segurança.

No meu caso, eu estava executando webpack-dev-serverem um contêiner nomeado assetscom docker-compose. Eu mudei o comando start para isso:

webpack-dev-server --mode development --host 0.0.0.0 --public assets

E o outro contêiner agora podia fazer solicitações via http://assets:5000.

ParkerD
fonte