Laravel-mix: Invalid Host/Origin header when running hot

Created on 22 Jan 2019 · 5Comments · Source: JeffreyWay/laravel-mix

Laravel Mix Version: 4.0.7
Node Version (node -v): v11.6.0
NPM Version (npm -v): 6.5.0
OS: macOS 10.14.2

Description:

When I run

npm run hot

yarn run hot

I get this in the console

app.js:22362 Invalid Host/Origin header
error   @   app.js:22362
onmessage   @   app.js:22632
EventTarget.dispatchEvent   @   app.js:3691
(anonymous) @   app.js:4408
SockJS._transportMessage    @   app.js:4406
EventEmitter.emit   @   app.js:3607
WebSocketTransport.ws.onmessage @   app.js:6482
app.js:22365 [WDS] Disconnected!
close   @   app.js:22365
onclose @   app.js:22608
EventTarget.dispatchEvent   @   app.js:3691
(anonymous) @   app.js:4490
setTimeout (async)      
SockJS._close   @   app.js:4478
SockJS._transportMessage    @   app.js:4418
EventEmitter.emit   @   app.js:3607
WebSocketTransport.ws.onmessage

Steps To Reproduce:

New install of Laravel

app.js

import Vue from 'vue';

Vue.component('sample-component', require('./components/sample-component.vue').default);

const app = new Vue({
    el: '#app'
});

sample-component.vue

<script>
    export default {
    }
</script>

<template>
    <div>
        Sample Fault Component
    </div>
</template>

welcome.blade.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Sample Fault Page</title>
    </head>
    <body>
        <div id="app">
           <sample-component />
        </div>

        {{--
            This works if I run yarn run dev
            <script src="/js/app.js"></script>
        --}}
        <script src="http://localhost:8080/js/app.js"></script>
    </body>
</html>

stale

Source

zimonline

Most helpful comment

Add --disable-host-check parameter to hot script in package.json

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",

Read more
https://webpack.js.org/configuration/dev-server/#devserver-disablehostcheck

ankurk91 on 23 Jan 2019

👍41 🎉11 🚀2

All 5 comments

Add --disable-host-check parameter to hot script in package.json

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",

Read more
https://webpack.js.org/configuration/dev-server/#devserver-disablehostcheck

ankurk91 on 23 Jan 2019

👍41 🎉11 🚀2

Add --disable-host-check parameter to hot script in package.json
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
Read more
https://webpack.js.org/configuration/dev-server/#devserver-disablehostcheck

Thanks. I can confirm this works and as hot is only used in development the security issues are not relevant.

zimonline on 23 Jan 2019

It looks as though explicitly configuring the HMR host is another pretty simple solution to this:

mix.options({
    hmrOptions: {
        host: 'your.test.domain'
    }
});

Having said that, if you need to support multiple devs who may be using different test domains it’s going to be simpler just to disable the check outright.

domstubbs on 31 Jan 2019

As I can't ever see where people would run hot in production
--disable-host-check
should be there by default so that this works out of the box.

zimonline on 31 Jan 2019

👍20

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.