Invalid Host header

My server.js file is following, when click the preview, I got the error message: Invalid Host header

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:3000/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler);
server.listen(3000, "localhost");

It’d be helpful if you can provide the project name so I can take a proper look, but I’m assuming it’s not liking the localhost - try 0.0.0.0.

Hi @Gareth, thank you. Here is my project: https://glitch.com/edit/#!/test-glitch

I also tried the 0.0.0.0, the result is the same.

I fixed the issue by modify the following line:

var server = new WebpackDevServer(compiler, {
  disableHostCheck: true
});

hah, yes - I was just looking at https://github.com/webpack/webpack-dev-server/issues/882 and it mentions that or specifically using 2.4.2, which worked too.

Yes, my solution is also come from there.

Hi I have this problem too. I am a newbie. Can you tell me what code and where exactly I should write? I have traversed to webpack-devserver/server.js file

Hi @realist_kisnaa,

Can you share with us the name of your project so we can take a closer look?

Hi thanks. project: https://glitch.com/~chaithanya008-orderstatuscomponent

I am getting “Invalid Host header”.

Help please, thanks

I solved invalid Host Header for my GitHub cloned project photonstorm-phaser3-project-template by using in pkg.json: “start”: “webpack-dev-server --inline --hot --host 0.0.0.0 --public $PROJECT_DOMAIN.glitch.me --config webpack/base.js --open”
Is this safe??? Is it the best thing to do? It seems to work but requires some patience as it takes almost a full minute before the Phaser Logo is seen bobbing up and down.
I am having problems getting an external Phaser scene file to run based on “Add a scene in Phaser 3 using NPM” by WClarkson https://www.youtube.com/watch?v=cXuEJi53BOQ
This scene problem might just be due to my inexperience as a coder working with Phaser 3, Node.js and Glitch.
Also, the Glitch Assets folder is not being used which I think it should be. Being a neophyte coder I don’t know how to upload an image to src/assets/. I tried but only the file name was added. I uploaded the same image to the Glitch assets folder.
So I’m searching for more info on Glitch in relation to working with Node.js, Express.js, Webpack, Phaser 3 etc.
I also wonder about using Express. Is it redundant? I have a private Phaser 2.4 GitHub project that I cloned to Glitch and it runs without adding a server like Express. I added Express in the dependencies for the phaser 3 template but have not created a server.js file or added routing code yet.

I think this part of the template README is key to understanding the setup, GitHub - photonstorm/phaser3-project-template: A Phaser 3 Project Template

Command Description
npm install Install project dependencies
npm start Build project and open web server running project
npm run build Builds code bundle with production settings (minification, uglification, etc…)

The template has start script to run a webpack dev webserver for a quick preview and debugging. The build script creates client code (html, css, js) in a “dist” folder, intended to be deployed to a production web server, which often is built in to a web hosting.

What happens in a Glitch node project is npm start is run to start a server. This could be the webpack dev server, as you’ve got working.

A better use for npm start is to start another server such as express, (for example node myexpresswebserver.js) and used to serve the production files in dist created by webpack in the build script (for example serve the dist folder as static files).

The Glitch project editor does not have a UI for project file upload, which you are likely expecting. To get files into the project, they can be done from the console using commands that retrieve from a URL, such as git, curl, wget.

The Glitch assets “folder” is not really a folder, it is an upload tool to put assets into a cdn, which can then be used by the project by referring to the cdn file URL.

I hope this helps a bit :slight_smile:

2 Likes

Thank you. Your posting does help a bit. I don’t know much about coding or Glitch. I cloned a Phaser 2.4 GitHub project of my own to Glitch and I was a bit amazed that it runs without me having to set up an Express server. I don’t know much about how Glitch works. I cloned The Phaser 3 Template from GitHub to work with ES6,7,8,9,10 and Glitch seemed to automate the node.js stuff so I didn’t have to use the instructions given regarding installing node or running npm start from the console. I’m looking into running npm run build and I have already added Express to the dependency list and I’m looking into adding a server.js file.
I’m looking at a Glitch project now regarding using relative paths but I think I’m going to go with using the Glitch upload tool and the cdn file URL.
I’m not sure about the security of the code I added to npm start which is what I was asking but it seems to be ok according to some notes on the internet regarding Invalid Host header. I’m in over my head but it’s amazing when just adding a comma or capitalizing the right words gets things running.

This sounds similar to the default when you choose New Project > hello-webpage. By default it runs a lws server, where it serves all the files without further processing on the server.

If you added a package.json it would behave like the hello-express project, ie. instead of lws it would run npm install, npm start, which allows you to have separate files for dev, server and client.

There are several other project configurations possible too, and other web servers you can implement.

To learn about this, read Release v2.4.3 · webpack/webpack-dev-server · GitHub . In summary, the security issue is similar to CORS, where you give permissions for files served by webpack-dev-server to be on other webpages, specifically your glitch project web page. Needed because the glitch project is a container, a kind of proxy, so webpack would otherwise see it as another site when requests come in.

Ideally you wouldn’t use the devserver in glitch unless you’re debugging the project, because it will be slower and doesn’t do the minify steps.

Saying its “safe” or “secure” hides too many details.

Yes I get that! Command line parameters start out as nice and simple, then get complex quickly as little tweaks are added. Then they evolve into configuration files, keeping the parameters around as well, and it all looks a mess.

Part of the reason why the syntax is so fiddly, is that there is a command shell interpreting the command line before passing the parameters on to webpack.

Yet another edit …

The glitch project cdn is configured to serve the files freely, i.e. without checking which host, so in a sense it is less secure than webpack-dev-server … it just means any other website can have a link to the same assets and the browser won’t complain.

1 Like