Webpack-encore: Invalid Host/Origin header errors showing up in the JS console

[wujekbogdan]

I use Webpack Encore to build assets for my non-Symfony app. Let's say that the app root URL is http://my-app.dev.

My app has a parser for the manifest.json file so it's able to load assets from http://my-app.dev/dist/ or from http://127.0.0.1:8080/ - depending on the dev/production mode.

The problem is that if the assets are server from Webpack dev server URL (http://127.0.0.1:8080/) then Invalid Host/Origin header errors keep on showing up in the JS console.

The errors are caused by Webpack dev server. Here's the bug report.

[quberok]

Try to run

./node_modules/.bin/encore dev-server --host 0.0.0.0 --disable-host-check

It should help you to resolve the problem

[Lyrkan]

Hi,

@Quberik From what I read on the webpack-dev-server issue it should have been fixed in 3.1.14.

Since Encore already asks for ^3.1.14 you shouldn't have to use disableHostCheck... which, as its name implies, disables an important security check.

Using it in combination with --host 0.0.0.0 is an even worse idea since it means that anyone/anything will be able to connect to your dev server. Maybe there are some situations where doing it can be needed but you shouldn't unless you don't have any other choice and fully understand what it means.

This issue doesn't seem to be one of those situations and can most likely be solved by doing something like --public my-app.dev:8080 or --host my-app.dev --port 8080.

[wujekbogdan]

It should help you to resolve the problem

It's a workaround, not a solution. The solution is to upgrade webpack-dev-server to 3.1.14. The bug is already fixed there: https://github.com/webpack/webpack-dev-server/pull/1608

[Lyrkan]

Closing this one since it shouldn't be an issue anymore.