{"id":432,"hash":"d7c313310a31d147f276d88ae7648a63cf9765851c17ec601c88c480e0489480","pattern":"I am getting an &quot;Invalid Host header&quot; message when connecting to webpack-dev-server remotely","full_message":"I am using as an environment, a Cloud9.io ubuntu VM Online IDE and I have reduced by troubleshooting this error to just running the app with Webpack dev server. \n\nI launch it with:\n\nwebpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT\n\n$IP is a variable that has the host address\n$PORT has the port number.\n\nI am instructed to use these vars when deploying an app in Cloud 9, as they have the default IP and PORT info.\n\nThe server boots up and compiles the code, no problem, it is not showing me the index file though. Only a blank screen with \"Invalid Host header\" as text.\n\nThis is the Request:\n\nGET / HTTP/1.1\nHost: store-client-nestroia1.c9users.io\nConnection: keep-alive\nPragma: no-cache\nCache-Control: no-cache\nUpgrade-Insecure-Requests: 1\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 \n(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36\nAccept: \ntext/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8\nDNT: 1\nAccept-Encoding: gzip, deflate, sdch, br\nAccept-Language: en-US,en;q=0.8\n\nThis is my package.json:\n\n{\n  \"name\": \"workspace\",\n  \"version\": \"0.0.0\",\n  \"scripts\": {\n    \"dev\": \"webpack -d --watch\",\n    \"server\": \"webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT\",\n    \"build\": \"webpack --config webpack.config.js\"\n  },\n  \"author\": \"Artur Vieira\",\n  \"license\": \"ISC\",\n  \"dependencies\": {\n    \"babel-core\": \"^6.18.2\",\n    \"babel-loader\": \"^6.2.8\",\n    \"babel-preset-es2015\": \"^6.18.0\",\n    \"babel-preset-react\": \"^6.16.0\",\n    \"babel-preset-stage-0\": \"^6.24.1\",\n    \"file-loader\": \"^0.11.1\",\n    \"node-fetch\": \"^1.6.3\",\n    \"react\": \"^15.5.4\",\n    \"react-bootstrap\": \"^0.30.9\",\n    \"react-dom\": \"^15.5.4\",\n    \"react-router\": \"^4.1.1\",\n    \"react-router-dom\": \"^4.1.1\",\n    \"url-loader\": \"^0.5.8\",\n    \"webpack\": \"^2.4.1\",\n    \"webpack-dev-server\": \"^2.4.4\",\n    \"whatwg-fetch\": \"^2.0.3\"\n  }\n}\n\nThis is the webpack.config.js:\n\nconst path = require('path');\n\nmodule.exports = {\n\n  entry: ['whatwg-fetch', \"./app/_app.jsx\"], // string | object | array\n  // Here the application starts executing\n  // and webpack starts bundling\n  output: {\n    // options related to how webpack emits results\n\n    path: path.resolve(__dirname, \"./public\"), // string\n    // the target directory for all output files\n    // must be an absolute path (use the Node.js path module)\n\n    filename: \"bundle.js\", // string\n    // the filename template for entry chunks\n\n    publicPath: \"/public/\", // string\n    // the url to the output directory resolved relative to the HTML page\n  },\n\n  module: {\n    // configuration regarding modules\n\n    rules: [\n      // rules for modules (configure loaders, parser options, etc.)\n      {\n        test: /\\.jsx?$/,\n        include: [\n          path.resolve(__dirname, \"./app\")\n        ],\n        exclude: [\n          path.resolve(__dirname, \"./node_modules\")\n        ],\n        loader: \"babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0\",\n        // the loader which should be applied, it'll be resolved relative to the context\n        // -loader suffix is no longer optional in webpack2 for clarity reasons\n        // see webpack 1 upgrade guide\n      },\n      {\n        test: /\\.css$/,\n        use: [ 'style-loader', 'css-loader' ]\n      },\n      {\n        test: /\\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,\n        loader: 'url-loader',\n        options: {\n          limit: 10000\n        }\n      }\n    ]\n  },\n\n  devServer: {\n    compress: true\n  }\n}\n\nWebpack dev server is returning this because of my host setup. In webpack-dev-server/lib/Server.js line 60. From https://github.com/webpack/webpack-dev-server\n\nMy question is how do I setup to correctly pass this check. Any help would be greatly appreciated.","ecosystem":"npm","package_name":"webpack","package_version":null,"solution":"I found out, that I need to set the public property of devServer, to my request's host value. Being that it will be displayed at that external address.\n\nSo I needed this in my webpack.config.js\n\ndevServer: {\n  compress: true,\n  public: 'store-client-nestroia1.c9users.io' // That solved it\n}\n\nAnother solution is using it on the CLI:\n\nwebpack-dev-server --public $C9_HOSTNAME   <-- var for Cloud9 external IP","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/43619644/i-am-getting-an-invalid-host-header-message-when-connecting-to-webpack-dev-ser","votes":300,"created_at":"2026-04-19T04:51:08.339328+00:00","updated_at":"2026-04-19T04:51:08.339328+00:00"}