如何用Nginx解決前端跨域問題？

前言

在開發靜態頁面時，相似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端口啓用。經同事提點，纔想起這事情，換下思路，就有了最上面的方法。

總結

其實不只是在開發調試時候能這麼幹，在生產環境也能這麼玩。利用Nginx轉發請求以後，就可以讓所要部署的靜態頁面不須要放在跟請求接口同域的地方。

附錄

若是發現請求出現問題，且發現是Nginx的報錯，那隻須要找到Nginx的error.log，就能夠知道緣由。

前提須要在nginx.conf配置error.log：

error_log  logs/error.log;

error.log在Mac的位置：

/usr/local/Cellar/nginx/1.15.8/logs/error.log

 

本文爲原創文章，轉載請保留原出處，方便溯源，若有錯誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/10269793.html