Mac修改hosts,域名與ip綁定,vue Invalid Host header

在移動開發過程當中，有時候須要使用域名進行訪問（如微信網頁開發）本地ip地址服務，或者使用域名訪問本地ip地址服務等。

這時候能夠修改host進行實現。

1. 修改host文件

在命令終端，使用root用戶修改host文件。域名使用root用戶打開/etc/hosts host文件進行修改。添加
ip及對應的域名

$ sudo vi /etc/hosts

127.0.0.1       localhost
127.0.0.1       zhangguoyedeMacBook-Pro.local
255.255.255.255 broadcasthost
::1             localhost
::1             zhangguoyedeMacBook-Pro.local

# 在這裏添加上ip及對應的域名並保存退出
#（這裏假設你設置的是本機ip是 127.0.0.1 訪問域名是 guoye.com）
127.0.0.1    guoye.com

2. 經過域名訪問項目

如今能夠在瀏覽器上訪問你設置的域名guoye.com，跟直接經過ip訪問127.0.0.1的內容是一致的。
一般你的項目會加上端口號，域名也須要加上端口號，如http://guoye.com:4201

3. vue (Invalid Host header)

在vue項目開發時，直接經過ip地址訪問正常，但經過上面host域名方式訪問，瀏覽器會顯示一段文字：Invalid Host header。
這是因爲新版webpack-dev-server出於安全考慮，默認檢查hostname，若是hostname 沒有配置在內的，將中斷訪問。

解決方法：
在vue.config.js的devServer配置文件加上 disableHostCheck: true

devServer: {
    port: 4201, // 端口配置
    proxy: {
        // 代理配置
    },
    disableHostCheck: true, // 這是因爲新版的webpack-dev-server出於安全考慮，默認檢查hostname，若是hostname 不是配置內的，將中斷訪問。
}

4. 手機端也經過域名進行訪問

移動開發時，能夠使用Charles軟件進行代理。
此時手機端也能經過域名訪問本機電腦的應用。
如何使用Charles，詳情查看博客的相關文章。