Solution of invalid host header in vue-cli3

Discovery scene

Recently, a project has been built with vue-cli3. As a result, it keeps reporting errors. The error information is as follows:

Invalid Host/Origin header

At the same time, we also found another problem, that is, the hot update also failed

Causes

The new version of webpack dev server adds security verification. By default, the host name is checked. If the host name is not in the configuration, the access will be interrupted.

Solution

Create a file in the root directory vue.config.js , and then fill in the following

module.exports = {
    devServer: {
        disableHostCheck: true,
    }
}

Restart the service and find hot updates.

Read More: