Beim Ausführen meiner React-App auf einem Webpack-Entwicklungsserver in Cloud9.io wird die Meldung "Ungültiger Host-Header" angezeigt

176

Ich verwende als Umgebung eine Cloud9.io-Ubuntu-VM-Online-IDE und habe mich durch die Fehlerbehebung darauf reduziert, die App nur mit dem Webpack-Entwicklungsserver auszuführen.

Ich starte es mit:

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

$ IP ist eine Variable mit der Hostadresse. $ PORT hat die Portnummer.

Ich werde angewiesen, diese Variablen beim Bereitstellen einer App in Cloud 9 zu verwenden, da sie die Standard-IP- und PORT-Informationen enthalten.

Der Server startet und kompiliert den Code, kein Problem, er zeigt mir jedoch nicht die Indexdatei. Nur ein leerer Bildschirm mit "Ungültiger Host-Header" als Text.

Dies ist die Anfrage:

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

Das ist mein 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"
  }
}

Dies ist die 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
  }
}

Der Webpack-Entwicklungsserver gibt dies aufgrund meines Host-Setups zurück. In Zeile 60 von webpack-dev-server / lib / Server.js. Von https://github.com/webpack/webpack-dev-server

Meine Frage ist, wie ich mich einrichten kann, um diese Prüfung korrekt zu bestehen. Jede Hilfe wäre sehr dankbar.

Artur Vieira
quelle
Das Problem scheint außerhalb des kommentierten Bereichs zu liegen.
Elmeister
Ich verstehe nicht, wie das Problem auftritt. Könnten Sie mich in die richtige Richtung weisen?
Artur Vieira
Nun, es stellt sich in meinem Fall heraus, dass die beste Antwort funktioniert hat.
MrMesees

Antworten:

311

Das Problem tritt auf, weil webpack-dev-server2.4.4 eine Hostprüfung hinzufügt. Sie können es deaktivieren, indem Sie dies zu Ihrer Webpack-Konfiguration hinzufügen:

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

 }      

EDIT: Bitte beachten Sie, dass dieses Update unsicher ist.

In der folgenden Antwort finden Sie eine sichere Lösung: https://stackoverflow.com/a/43621275/5425585

刘芳友
quelle
13
Dies ist ein Sicherheitsproblem. Verwenden Sie stattdessen die Option public, um den zulässigen Hostnamen anzugeben. Weitere Informationen finden Sie unter medium.com/webpack/… .
SystemParadox
5
öffentliche Option allein hat bei mir nicht funktioniert ... disableHostCheck ist das einzige, was es gelöst hat: \
davidkomer
@ Davidkomer gleich für mich. Das einzige was funktioniert ist disableHostCheck ...
irl_irl
6
Dies ist ein Sicherheitsproblem, wenn Sie den Webpack-Entwicklungsserver für andere Zwecke als für lokale Entwickler verwenden.
AlienWebguy
Das hat auch bei mir funktioniert. Mein Fall war, dass ich eine bitnami Multisite Worpdress-Installation verwendete, die auf 192.168.0.106.xip.io bereitgestellt wurde. Was seltsam ist, ich konnte an meiner alten Apache Linux-Installation ohne dieses "Update" arbeiten. Erst als ich zu dem Bitnami-Paket gewechselt bin, ist dieses Problem aufgetreten.
Hybrid Web Dev
103

Ich habe herausgefunden, dass ich die publicEigenschaft von devServer auf den Hostwert meiner Anfrage setzen muss. Da es an dieser externen Adresse angezeigt wird.

Also brauchte ich das in meiner webpack.config.js

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

Eine andere Lösung ist die Verwendung in der CLI:

webpack-dev-server --public $ C9_HOSTNAME <- var für externe Cloud9-IP

Artur Vieira
quelle
1
Auch heute bin ich darauf gestoßen! Vielen Dank für die Veröffentlichung!
JohnnyQ
5
Auch heute gerade darauf gestoßen. Es sieht so aus, als webpack-dev-serverob diese Änderung kürzlich vorgenommen wurde und der richtige Host-Header erforderlich ist. Weitere Informationen finden Sie unter github.com/webpack/webpack-dev-server/releases/tag/v2.4.3 .
Kaitrono
2
Die Änderung betrifft auch den Webpack-Dev-Server 1.16.4. Sie können hier mehr darüber lesen: medium.com/webpack/… .
Tyler Collier
1
Dies funktionierte auch für mich, als ich Invalid Host headerin einem vue cli-Projekt auf den Fehler stieß.
Timmy Von Heiss
43

Das hat bei mir funktioniert:

Fügen Sie allowHosts unter devServer in Ihrer webpack.config.js hinzu:

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

Ich musste die Parameter --host oder --public nicht verwenden.

irl_irl
quelle
Wenn Sie über HotModuleReload verfügen, ist es anscheinend der publicParameter, der die als Ziel verwendete URL festlegt (wenn es nicht erraten kann, wie die Seite bereitgestellt wird, was für mich nicht möglich ist).
Tom Saleeba
15

Fügen Sie diese Konfiguration Ihrer Webpack-Konfigurationsdatei hinzu, wenn Sie den webpack-dev-Server verwenden (Sie können den Host weiterhin als 0.0.0.0 angeben).

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}
Sampath
quelle
2
Dies funktioniert auch für die neue Vue.js vue-cli-Konfiguration: github.com/vuejs/vue-cli/blob/dev/docs/config.md
CenterOrbit
9

Die sicherere Option wäre, allowHosts wie folgt zu Ihrer Webpack-Konfiguration hinzuzufügen:

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

Das Array enthält alle zulässigen Hosts. Sie können auch Subdomians angeben. Hier erfahren Sie mehr

AV Paul
quelle
5

Wenn Sie CRA noch nicht verlassen haben, können Sie Ihre Webpack-Konfiguration nicht einfach ändern. Die Konfigurationsdatei ist in versteckt node_modules/react_scripts/config/webpackDevServer.config.js. Es wird davon abgeraten, diese Konfiguration zu ändern.

Stattdessen können Sie nur die Umgebungsvariable gesetzt , DANGEROUSLY_DISABLE_HOST_CHECKum truedie Host - Prüfung zu deaktivieren:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command
Lukas Kalbertodt
quelle
1
Danke, Lukas Kalbertodt, beste Antwort. Ich habe verwendet: export DANGEROUSLY_DISABLE_HOST_CHECK = true; npm start
Mark Kahn
3

Anstatt die Webpack-Konfigurationsdatei zu bearbeiten, können Sie die Hostprüfung einfacher deaktivieren, indem Sie eine .envDatei zu Ihrem Stammordner hinzufügen und Folgendes einfügen :

DANGEROUSLY_DISABLE_HOST_CHECK=true

Wie der Variablenname andeutet, ist das Deaktivieren unsicher und nur in Entwicklungsumgebungen ratsam .

Kyle Ordona
quelle
2

Wenn Sie die Create-React-App auf C9 verwenden, führen Sie zum Starten einfach diesen Befehl aus

npm run start --public $C9_HOSTNAME

Und greifen Sie von Ihrem Hostnamen aus auf die App zu (z. B. geben Sie $C_HOSTNAMEdas Terminal ein, um den Hostnamen zu erhalten).

rex
quelle
0

Wenn Sie webpack-dev-serverin einem Container ausgeführt werden und über seinen Containernamen Anforderungen an ihn senden, wird diese Fehlermeldung angezeigt. Um Anforderungen von anderen Containern im selben Netzwerk zuzulassen, geben Sie einfach den Containernamen (oder einen beliebigen Namen, der zum Auflösen des Containers verwendet wird) mit der --publicOption an. Dies ist besser, als die Sicherheitsüberprüfung vollständig zu deaktivieren.

In meinem Fall lief ich webpack-dev-serverin einem Container mit dem Namen assetsdocker-compose. Ich habe den Startbefehl folgendermaßen geändert:

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

Und der andere Container konnte nun Anfragen über stellen http://assets:5000.

ParkerD
quelle