new vue.js project preview yields "Invalid Host header"

[csells]

Installing the vue cli via "npm i -g @vue/cli" and running "vue create hello-world" worked great. However, running it with "yarn serve" and previewing the output on port 8080 yielded a page that said only "Invalid Host header".

[svenefftinge]

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

[csells]

Yep. That did the trick.

[svenefftinge]

Also the host needs to be passed and set to 0.0.0.0 as it defaults to only accepting localhost.

webpack-dev-server --host 0.0.0.0

[svenefftinge]

Btw. the latest update includes full support for *.vue files.

[Code9117]

Thanks!your answer.my name is bobo.

[tribals]

Closed, but it is better to use devServer.public: https://webpack.js.org/configuration/dev-server/#devserver-public

[sobiero]

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

Where is the file vue.config.js located or do I need to create it? I'm using vue/cli 3.9

[brunogcpinheiro]

@sobiero Yes, create it in root!

[scozma]

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

Where is the file vue.config.js located or do I need to create it? I'm using vue/cli 3.9

You can create a file with that name if you don't have it and add it on the root of your project (same level as package.json for example)

[qkmc-rk]

The dev server isn't accepting external requests. You need to put below's config

// vue.config.js
module.exports = {
// options...
devServer: {
disableHostCheck: true
}
}
Where is the file vue.config.js located or do I need to create it? I'm using vue/cli 3.9
You can create a file with that name if you don't have it and add it on the root of your project (same level as package.json for example)

[jp96201]

ssfa

[mittalyashu]

@svenefftinge

I tried passing the url with --public flag but it didn't work either

yarn run dev --public $GITPOD_WORKSPACE_URL

Even tried passing the port

--public $GITPOD_WORKSPACE_URL:443

---

Also, using disableHostCheck: true doesn't to pose security risk?

[HalftimeHarry]

This fixed it https://stackoverflow.com/questions/52959601/using-vue-cli-in-cloud9-ide-container-invalid-host-header

[jannikbuscha]

this fixed the error for me:
devServer: { allowedHosts: 'all', },

[Teeratach-Thawilwang]

this fixed the error for me: devServer: { allowedHosts: 'all', },

This answer helps me a lot. Thank!
for vue-cli-service version ~5.0.0 and my vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: { allowedHosts: 'all', },
  pluginOptions: {
    moment: {
      locales: [
        ''
      ]
    }
  }
})

[zhangshoucheng1]

开发服务器不接受外部请求。您需要在下面放置配置

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true
    }
}

great

[ranji31]

is same as for ionic angular? I'm include above the module file but is still showing "Invalid Host Header"

[SheikhElMoctarG]

is same as for ionic angular? I'm include above the module file but is still showing "Invalid Host Header"

I'm too

[SheikhElMoctarG]

I fixed it, only change your vue.config.js:
module.exports = defineConfig({ transpileDependencies: true, devServer: { allowedHosts: 'all', client: {webSocketURL: 'auto://0.0.0.0:0/ws'}}, })

[madlife12327]

I fixed it, only change your vue.config.js: module.exports = defineConfig({ transpileDependencies: true, devServer: { allowedHosts: 'all', client: {webSocketURL: 'auto://0.0.0.0:0/ws'}}, })

right,if you use vue-cli greater than version 5 ,please change vue.config.js to devServer:{allowedHosts:'all'} ,
otherwise use less than vue-cli version 5, change vue.config.js to devServer:{disableHostCheck: true}