Vue——解决 Vue 项目 invalid host header 问题

studystudy。。

已于 2022-08-31 14:37:29 修改

阅读量1.7k

点赞数 1

文章标签： vue.js 前端 webpack

于 2022-08-31 14:35:05 首次发布

本文链接：https://blog.csdn.net/weixin_43551242/article/details/126620572

版权

问题复现：
在本地hosts文件修改ip 127.0.0.2  xin.a.admin.com
启动本地vue3 的项目，访问地址时报错（invalid host header），http://xin.a.admin.com:8080/#/login

解决方案：
排查后发现是vue3项目里面需要修改webpack

在vue.config.js 里面设置允许访问的域名，
module.exports = {
  //...
  devServer: {
    allowedHosts: [
      '.admin.com', // 允许访问的域名地址， 
    ],
  },
};




## webpack介绍（devServer.allowedHosts）:
该选项允许将允许访问开发服务器的服务列入白名单
module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com',
    ],
  },
};
模仿 django 的ALLOWED_HOSTS，用 . 作为子域通配符。.host.com 会与 host.com，www.host.com 以及 host.com 等其他任何其他子域匹配。