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

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.

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

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

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.

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
}

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

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

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 .

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).

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.