Ricevo il messaggio "Intestazione host non valida" quando eseguo la mia app React in un server di sviluppo Webpack su Cloud9.io

Sto usando come ambiente un IDE di VM VM Ubuntu Cloud9.io e ho ridotto risolvendo questo errore semplicemente eseguendo l'app con il server dev Webpack.

Lo lancio con:

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

$ IP è una variabile che ha l'indirizzo host $ PORT ha il numero di porta.

Mi viene richiesto di utilizzare questi varianti durante la distribuzione di un'app in Cloud 9, in quanto hanno le informazioni IP e PORT predefinite.

Il server si avvia e compila il codice, nessun problema, tuttavia non mi mostra il file indice. Solo una schermata vuota con "Intestazione host non valida" come testo.

Questa è la richiesta:

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

Questo è il mio pacchetto.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"
  }
}

Questo è il 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
  }
}

Il server di sviluppo Webpack lo sta restituendo a causa della mia configurazione dell'host. In webpack-dev-server / lib / Server.js linea 60. Da https://github.com/webpack/webpack-dev-server

La mia domanda è: come si configura per passare correttamente questo controllo. Qualsiasi aiuto sarebbe molto apprezzato.

Il problema si verifica perché webpack-dev-server2.4.4 aggiunge un controllo host. Puoi disabilitarlo aggiungendolo alla tua configurazione webpack:

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

 }      

EDIT: Nota, questa correzione non è sicura.

Per una soluzione sicura, consultare la seguente risposta: https://stackoverflow.com/a/43621275/5425585

Ho scoperto che devo impostare il public proprietà di devServer sul valore host della mia richiesta. Essendo che verrà visualizzato a quell'indirizzo esterno.

Quindi ne avevo bisogno nel mio webpack.config.js

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

Un'altra soluzione lo sta utilizzando nella CLI:

webpack-dev-server --public $ C9_HOSTNAME <- var per IP esterno Cloud9

Questo è ciò che ha funzionato per me:

Aggiungi gli host consentiti sotto devServer nel tuo webpack.config.js:

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

Non avevo bisogno di usare i parametri --host o --public.

Aggiungi questa configurazione al tuo file di configurazione webpack quando usi webpack-dev-server (puoi comunque specificare l'host come 0.0.0.0).

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}

L'opzione più sicura sarebbe quella di aggiungere gli host consentiti alla configurazione del tuo Webpack in questo modo:

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

L'array contiene tutti gli host consentiti, è inoltre possibile specificare i sottodomini. Scopri di più qui

Se non sei ancora stato espulso da CRA, non puoi modificare facilmente la configurazione del tuo webpack. Il file di configurazione è nascosto innode_modules/react_scripts/config/webpackDevServer.config.js . Ti scoraggia a cambiare quella configurazione.

Invece, puoi semplicemente impostare la variabile di ambiente DANGEROUSLY_DISABLE_HOST_CHECKsu trueper disabilitare il controllo host:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

Invece di modificare il file di configurazione del webpack, il modo più semplice per disabilitare il controllo host è aggiungendo un .envfile alla cartella principale e inserendo questo:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Come suggerisce il nome della variabile, disabilitarlo non è sicuro ed è consigliabile utilizzarlo solo in ambiente di sviluppo.

Se stai usando create -eagire-app su C9, esegui questo comando per iniziare

npm run start --public $C9_HOSTNAME

E accedi all'app da qualunque sia il tuo nome host (es. Digita $C_HOSTNAMEil terminale per ottenere il nome host)

Se stai eseguendo webpack-dev-serverun contenitore e gli stai inviando richieste tramite il suo nome contenitore, otterrai questo errore. Per consentire richieste da altri contenitori sulla stessa rete, è sufficiente fornire il nome del contenitore (o qualunque sia il nome utilizzato per risolvere il contenitore) utilizzando l' --publicopzione. È meglio che disabilitare del tutto il controllo di sicurezza.

Nel mio caso, stavo correndo webpack-dev-serverin un contenitore chiamato assetscon docker-compose. Ho cambiato il comando di avvio in questo:

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

E l'altro contenitore era ora in grado di effettuare richieste tramite http://assets:5000.