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

问题复现：
在本地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 等其他任何其他子域匹配。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36