如何用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
更多Nginx相關知識，請造訪 Nginx使用教學專欄！
以上是nginx怎麼解決跨域問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
