Vue-cli: "Invalid Host/Origin header" errors in browser developer tools console.

[Tekhne]

Version

3.2.0

Reproduction link

N/A

Environment info

Environment Info:

  System:
    OS: OS X El Capitan 10.11.6
    CPU: (2) x64 Intel(R) Core(TM)2 Duo CPU     T9600  @ 2.80GHz
  Binaries:
    Node: 10.14.2 - ~/.nodenv/versions/10.14.2/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nodenv/versions/10.14.2/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 11.1.2
  npmPackages:
    @vue/babel-preset-app:  3.2.0 
    @vue/cli-overlay:  3.2.0 
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0 
    @vue/cli-plugin-e2e-cypress: ^3.2.0 => 3.2.0 
    @vue/cli-plugin-pwa: ^3.2.0 => 3.2.0 
    @vue/cli-plugin-typescript: ^3.2.0 => 3.2.0 
    @vue/cli-plugin-unit-mocha: ^3.2.0 => 3.2.0 
    @vue/cli-service: ^3.2.0 => 3.2.0 
    @vue/cli-shared-utils:  3.2.0 
    @vue/component-compiler-utils:  2.3.1 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.27 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    babel-plugin-transform-vue-jsx:  4.0.1 
    vue: ^2.5.17 => 2.5.21 
    vue-class-component: ^6.0.0 => 6.3.2 
    vue-hot-reload-api:  2.3.1 
    vue-loader:  15.4.2 
    vue-property-decorator: ^7.0.0 => 7.2.0 
    vue-router: ^3.0.1 => 3.0.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.17 => 2.5.21 
    vue-template-es2015-compiler:  1.6.0 
    vuex: ^3.0.1 => 3.0.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

I generated a new project with the vue create ... command, ran npm run serve from within the new project, visited the URL output (i.e. http://localhost:8080), and opened the developer tools console in my browser (Firefox). At that point, I saw errors streaming to the console.

What is expected?

No errors in the console.

What is actually happening?

I see the following errors in the developer tools console, sent over and over again:

Invalid Host/Origin header client:174
error client:174
onmessage socket.js:41
[5]</EventTarget.prototype.dispatchEvent sockjs.js:170
[14]</</SockJS.prototype._transportMessage/< sockjs.js:887
[14]</</SockJS.prototype._transportMessage sockjs.js:885
[3]</EventEmitter.prototype.emit sockjs.js:86
WebSocketTransport/this.ws.onmessage sockjs.js:2961

[WDS] Disconnected! client:177
close client:177
onclose socket.js:17
[5]</EventTarget.prototype.dispatchEvent sockjs.js:170
[14]</</SockJS.prototype._close/< sockjs.js:969

[lbogdan]

Fix here: https://github.com/webpack/webpack-dev-server/pull/1608 , now we just have to wait for it to be merged and a new webpack-dev-server version to be released.

[egasimus]

See also https://github.com/sockjs/sockjs-node/pull/247

[sodatea]

Should have been fixed with the latest release of webpack-dev-server v3.1.14

Please run rm -rf node_modules yarn.lock package-lock.json and reinstall the dependencies.

[withparadox2]

@sodatea Hi, I use npm, is there any way to update the version of webpack-dev-server alone?

[sodatea]

@withparadox2 Just reinstall the deps, we didn't lock the version of webpack-dev-server so it will automatically resolve to the newest release.

[withparadox2]

@sodatea Thanks, problem solved.

[rabbitwerks]

Confirmed fixed, simply running npm i webpack-dev-server to update that dep, fixed it for me.

[helloJincheng]

@withparadox2 怎么解决的呀

[withparadox2]

@helloJincheng 我是把node_modules全部删除重新install

[pengmoumou]

pro-tested.This problem has been fixed with webpack-dev-server v3.1.14