Ik krijg een bericht “Ongeldig host header” wanneer u op afstand verbinding maakt met Webpack-Dev-Server

Ik gebruik als een omgeving, een cloud9.io ubuntu vm online IDE en ik heb verminderd door het oplossen van deze foutmelding op te lossen om de app te gebruiken met Webpack Dev Server.

Ik start het met:

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

$ IP is een variabele die het hostadres heeft
$ Poort heeft het poortnummer.

Ik ben geïnstrueerd om deze VAR’s te gebruiken bij het implementeren van een app in Cloud 9, omdat ze de standaard IP- en PAT-informatie hebben.

De server laarde en compileert de code, geen probleem, het is niet die me het indexbestand laat zien. Alleen een leeg scherm met “Ongeldige host header” als tekst.

Dit is het verzoek:

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

Dit is mijn pakket.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"
  }
}

Dit is de 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
  }
}

Webpack dev-server retourneert dit vanwege mijn hostconfiguratie. In webpack-dev-server/lib/Server.js regel 60. Van https://github.com /webpack/webpack-dev-server

Mijn vraag is hoe ik deze controle kan instellen om correct te slagen. Alle hulp wordt zeer op prijs gesteld.


Antwoord 1, autoriteit 100%

Het probleem treedt op omdat webpack-dev-server2.4.4 een hostcontrole toevoegt. U kunt het uitschakelen door dit toe te voegen aan uw webpack-configuratie:

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

EDIT: Let op, deze oplossing is onveilig.

Zie het volgende antwoord voor een veilige oplossing:
https://stackoverflow.com/a/43621275/5425585


Antwoord 2, autoriteit 35%

Ik heb ontdekt dat ik de eigenschap publicvan devServer moet instellen op de hostwaarde van mijn verzoek. Omdat het op dat externe adres wordt weergegeven.

Dus ik had dit nodig in mijn webpack.config.js

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

Een andere oplossing is om het op de CLI te gebruiken:

webpack-dev-server --public $C9_HOSTNAME   <-- var for Cloud9 external IP

3, Autoriteit 14%

Dit is wat voor mij werkte:

Toegestaan ​​toevoegen Boxen onder Devserver in uw Webpack.config.js:

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

Ik hoefde de –Host of – openbare params niet te gebruiken.


4, Autoriteit 4%

Voeg deze config toe op uw Webpack Config-bestand bij gebruik van Webpack-Dev-Server (u kunt nog steeds de host opgeven als 0.0.0.0).

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

5, Autoriteit 4%

De meer beveiligde optie zou zijn om OldHosts aan uw Webpack-configuratie toe te voegen:

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

De array bevat alle toegestane host, u kunt ook subdomeinen specificeren. Bekijk hier meer


6, Autoriteit 2%

In plaats van het webpack-configuratie-bestand te bewerken, is de eenvoudigere manier om de hostcontrole uit te schakelen door een .env-bestand toe te voegen aan uw rootmap en deze:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Naarmate de variabele naam inhoudt, is het invalideren van het onveilig en is slechts aan te raden om alleen in dev-omgeving te gebruiken.


7, Autoriteit 2%

Als u nog niet van CRA bent uitgeworpen, kunt u uw Webpack-configuratie niet eenvoudig wijzigen. Het configuratiebestand is verborgen in node_modules/react_scripts/config/webpackDevServer.config.js. U bent ontmoedigd om die configuratie te wijzigen.

In plaats daarvan kunt u gewoon de omgevingsvariabele instellen DANGEROUSLY_DISABLE_HOST_CHECKNaar trueOm de hostcontrole uit te schakelen:

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

8

Als u CADE-react-app gebruikt op C9, voert u deze opdracht uit om

te starten

npm run start --public $C9_HOSTNAME

En toegang tot de app van wat uw hostnaam is (bijv. Type $C_HOSTNAMEin de terminal om de hostnaam te krijgen)


9

Hallo reageer ontwikkelaars ,

In plaats van dit te doen
disableHostCheck: true,in webpackDevServer.config.js. U kunt de ‘invalid host headers’-fout eenvoudig oplossen door een .env-bestand aan uw project toe te voegen, de variabelen HOST=0.0.0.0en DANGEROUSLY_DISABLE_HOST_CHECK=truein .env-bestand. Als u wijzigingen wilt aanbrengen in webpackDevServer.config.js, moet u de react-scripts extraheren met ‘npm run eject’, wat niet wordt aanbevolen. Dus de betere oplossing is het toevoegen van bovengenoemde variabelen in het .env-bestand van uw project.

Veel plezier met coderen 🙂


Antwoord 10

Ik heb dit probleem net ondervonden tijdens het gebruik van het Windows-subsysteem voor Linux (WSL2), dus ik zal deze oplossing ook delen.

Mijn doel was om de uitvoer van webpack zowel op wsl:3000als localhost:3000weer te geven, om zo een alternatief lokaal eindpunt te creëren.

Zoals je zou verwachten, veroorzaakte dit aanvankelijk de foutmelding “Ongeldige host-header”. Niets leek te helpen totdat ik de onderstaande devServer-configuratieoptie toevoegde.


module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['http://wsl:3000'],
        target: 'http://localhost:3000',
      },
    ],
  },
}

Dit heeft de “bug” verholpen zonder beveiligingsrisico’s te introduceren.

Referentie: webpack DevServer-documenten


Antwoord 11

Ik heb dit probleem opgelost door proxying van de host-header toe te voegen in de nginx-configuratie, als volgt:

server {
    listen 80;
    server_name     localhost:3000;
    location / {
        proxy_pass http://myservice:8080/;
        proxy_set_header HOST $host;
        proxy_set_header Referer $http_referer;
    }
}

Ik heb eraan toegevoegd:

proxy_set_header host $ host;

proxy_set_header refereerder $ http_referer;


12

Sinds WebPack-Dev-Server 4 moet u dit toevoegen aan uw configuratie:

devServer: {
  firewall: false,
}

13

Tijdens het gebruik van het standaardgedrag (geen configuratie-bestand) met Webpack 5 gerelateerd aan dit bericht: [HTTPS: // StackoverFlow.com / A / 65268634 / 2544762`]

"scripts": {
    "dev": "webpack serve --mode development --env development --hot --port 3000"
    ...
    ...
},
"devDependencies": {
    ...
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0"
},

Met Webpack 5 Help webpack serve --help:

Usage: webpack serve|server|s [entries...] [options]
Run the webpack dev server.
Options:
  -c, --config <value...>     Provide path to a webpack configuration file e.g.
                              ./webpack.config.js.
  --config-name <value...>    Name of the configuration to use.
  -m, --merge                 Merge two or more configurations using
                              'webpack-merge'.
  --env <value...>            Environment passed to the configuration when it
                              is a function.
  --node-env <value>          Sets process.env.NODE_ENV to the specified value.
  --progress [value]          Print compilation progress during build.
  -j, --json [value]          Prints result as JSON or store it in a file.
  -d, --devtool <value>       Determine source maps to use.
  --no-devtool                Do not generate source maps.
  --entry <value...>          The entry point(s) of your application e.g.
                              ./src/main.js.
  --mode <value>              Defines the mode to pass to webpack.
  --name <value>              Name of the configuration. Used when loading
                              multiple configurations.
  -o, --output-path <value>   Output location of the file generated by webpack
                              e.g. ./dist/.
  --stats [value]             It instructs webpack on how to treat the stats
                              e.g. verbose.
  --no-stats                  Disable stats output.
  -t, --target <value...>     Sets the build target e.g. node.
  --no-target                 Negative 'target' option.
  --watch-options-stdin       Stop watching when stdin stream has ended.
  --no-watch-options-stdin    Do not stop watching when stdin stream has ended.
  --bonjour                   Broadcasts the server via ZeroConf networking on
                              start
  --lazy                      Lazy
  --liveReload                Enables/Disables live reloading on changing files
  --serveIndex                Enables/Disables serveIndex middleware
  --inline                    Inline mode (set to false to disable including
                              client scripts like livereload)
  --profile                   Print compilation profile data for progress steps
  --progress                  Print compilation progress in percentage
  --hot-only                  Do not refresh page if HMR fails
  --stdin                     close when stdin ends
  --open [value]              Open the default browser, or optionally specify a
                              browser name
  --useLocalIp                Open default browser with local IP
  --open-page <value>         Open default browser with the specified page
  --client-log-level <value>  Log level in the browser (trace, debug, info,
                              warn, error or silent)
  --https                     HTTPS
  --http2                     HTTP/2, must be used with HTTPS
  --key <value>               Path to a SSL key.
  --cert <value>              Path to a SSL certificate.
  --cacert <value>            Path to a SSL CA certificate.
  --pfx <value>               Path to a SSL pfx file.
  --pfx-passphrase <value>    Passphrase for pfx file.
  --content-base <value>      A directory or URL to serve HTML content from.
  --watch-content-base        Enable live-reloading of the content-base.
  --history-api-fallback      Fallback to /index.html for Single Page
                              Applications.
  --compress                  Enable gzip compression
  --port <value>              The port
  --disable-host-check        Will not check the host
  --socket <value>            Socket to listen
  --public <value>            The public hostname/ip address of the server
  --host <value>              The hostname/ip address the server will bind to
  --allowed-hosts <value...>  A list of hosts that are allowed to access the
                              dev server, separated by spaces
Global options:
  --color                     Enable colors on console.
  --no-color                  Disable colors on console.
  -v, --version               Output the version number of 'webpack',
                              'webpack-cli' and 'webpack-dev-server' and
                              commands.
  -h, --help [verbose]        Display help for commands and options.
To see list of all supported commands and options run 'webpack --help=verbose'.
Webpack documentation: https://webpack.js.org/.
CLI documentation: https://webpack.js.org/api/cli/.
Made with ♥ by the webpack team.
Done in 0.44s.

Oplossing

Dus voeg gewoon --disable-host-checktoe met de opdracht webpack serveen doe het.

Other episodes