vue开发环境，使用 proxy 代理，出现Invalid Host header

为什么会出现这个呢，是因为 webpack 为了安全，去校验了我的 host

什么是 host ,浏览器访问一下 window.location 查看一下

我是配置了一个本地域名，所以出现这种情况

一般起一个vue项目，是 http://localhost:8080 这样的， 因为在测试 charles 抓包，而这个抓包工具，又不能抓 127.0.0.1 ，必须要一个域名，那就配置一个本地域名

然后访问 localhost.charlesproxy.cn:8080/#/ 就出现了这种情况

首先看看你的 webpack 版本，只要是 4.x以上的，都有去检查 host 是否一直， 开发环境使用 webpack-dev-serve 插件，里面有一个 host（webpack-API） 配置， 默认是 host: 'localhost' 那就是和 localhost.charlesproxy.cn 不一致， webpack-dev-serve 直接给拦截了

解决办法

1、禁用 host检查

vue.config.js

module.exports = {
  configureWebpack: {
    devServer: {
      // 不检查host 如果检查，本地域名将失效
      disableHostCheck: true,
      proxy: {
        '/api': {
          // 要代理的线上地址
          target: 'https://test.com/',
          // 是否将 api前缀重写，这里直接替换为空字符串
          pathRewrite: { "^/api": "" },
          secure: false
        }
      }
    }
  }
}

2、将 webpack-dev-serve 的 host 改为你目标的hostname 一致，就可以

这种方式修改以后， 就不能访问 127.0.0.1:8080 或者 localhost:8080 这已经失效了 vue.config.js

module.exports = {
  configureWebpack: {
    devServer: {
      host: 'localhost.charlesproxy.cn',
      proxy: {
        '/api': {
          target: 'https://test.com/',
          pathRewrite: { "^/api": "" },
          secure: false
        }
      }
    }
  }
}

以上2种方式，都是修改了 webpack 配置，都要重启服务才能生效