前言

在開發靜態頁面時，類似vue的應用，我們常會呼叫一些介面，這些介面極可能是跨域，然後瀏覽器就會報cross-origin問題不給調。

最簡單的解決方法，就是把瀏覽器設為忽略安全問題，設定--disable-web-security。不過這種方式開發PC頁面到還好，如果是移動端頁面就不行了。

解決辦法

使用Nginx轉發請求。把跨域的介面寫成調本域的介面，然後將這些介面轉發到真正的請求地址。

舉個栗子

例如我們在開發一個vue應用。

原先：

除錯頁面是：http://192.168.1.100:8080/

請求的介面是：http://ni.hao.sao/api/get/info

步驟一：

請求的介面是：http://192.168.1.100:8080/api/get/info

PS：這樣就解決了跨域問題。

步驟二：

安裝好Nginx後，去到/usr/local/etc/nginx/目錄（這是Mac的），修改nginx.conf檔案。

步驟三：

把預設的server配置註釋掉。

在下面增加：

server{
        listen 8888;
        server_name  192.168.1.100;
 
        location /{
            proxy_pass http://192.168.1.100:8080;
        }
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
 }
 

儲存後，啟動Nginx。

PS：並不需要太瞭解Nginx的配置，很簡單的。

步驟四：

訪問：http://192.168.1.100:8888/

搞定。

PS：注意訪問的埠是‘8888’，有其他域的地址繼續加location就行了。

錯誤示範

我一開始不太懂Nginx的配置，以為可以如下配置。

server{
        listen 8080;
        server_name  192.168.1.100;
 
        location /api{
            proxy_pass http://ni.hao.sao/api;
        }
 }

之所以這麼寫，是我認為這樣可以讓Nginx幫我監聽8080的請求，然後只轉發匹配的請求。我沒有意識到的是Nginx這麼寫後，是需要佔用8080埠的。

既然需要佔用埠，那也就不能再被其他相同協議的程序佔用，就導致開發的頁面無法以8080埠啟用。經同事提點，才想起這事情，換下思路，就有了最上面的方法。

廣州vi設計http://www.maiqicn.com 辦公資源網站大全 https://www.wode007.com

總結

其實不僅是在開發除錯時候能這麼幹，在生產環境也能這麼玩。利用Nginx轉發請求之後，就能夠讓所要部署的靜態頁面不需要放在跟請求介面同域的地方。