自定義域名訪問本地服務

現代前端開發模式：使用node起本地服務，而後經過localhost或127.0.0.1直接訪問調試。相信這是大部分前端開發天天的工做模式，絕大部分狀況下，這沒有任何問題。可是對於一些特殊場景：如微信公衆號或者釘釘H5微應用等須要內嵌在第三方平臺調試的狀況，會限制直接使用localhost本地域名，這時候咱們就須要使用真實的域名來訪問咱們的本地服務了。

使用正向代理

以Charles爲例，說明如何使用正向代理，將域名對應的請求轉發到本地服務。

首先開啓Charles的HTTP代理服務：

而後，開啓Map Remote代理：

再添加相應的代理轉發規則，將目標域名轉發到本地服務的指定端口：

最後，將瀏覽器的代理指向本機的Charles服務：

這樣，當咱們訪問http://www.demo.com的時候，就直接轉發到http://localhost:8082這個本地服務了。

使用反向代理

除了正向代理，咱們也能夠使用修改hosts文件 + nginx反向代理來實現。

首先，經過修改hosts文件，將目標域名的請求轉發到本地：

127.0.0.1 www.demo.com
複製代碼

由於hosts文件不支持端口轉發，因此咱們還須要在本地起nginx服務，監聽80端口並反向代理到本地的node服務：

server {
    listen 80;
    server_name *.demo.com;

    location / {
        proxy_pass  http://localhost:8082/;
        proxy_set_header Host localhost;
        proxy_set_header Origin localhost;
        proxy_hide_header Access-Control-Allow-Origin;
        add_header Access-Control-Allow-Origin "http://www.demo.com";
    }

    location /sockjs-node/ {
        proxy_pass http://localhost:8082;
        proxy_set_header Host localhost;
        proxy_set_header Origin localhost;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_hide_header Access-Control-Allow-Origin;
        add_header Access-Control-Allow-Origin "http://www.demo.com";
    }
}
複製代碼

這裏的/sockjs-node/配置，是用於hot reload的。

配置完以後，使用nginx -s reload重啓服務，再訪問http://www.demo.com的時候，請求獲得的就是http://localhost:8082這個本地服務的內容了。

若是訪問的時候遇到報錯，提示無權限，能夠使用下面的命令來解決：

sudo nginx -s stop
sudo chmod -R 777 /usr/local/var/run/nginx/*
複製代碼

這是由於開發模式下的腳本沒有通過壓縮，文件會比較大，而nginx會將大文件緩存到本地以加速，若是沒有本地目錄寫入權限的話，則會拋出錯誤提示。

參考：

• VueJS dev serve with reverse proxy
• 前端開發如何獨立解決跨域問題
• Hosts文件與域名解析