這篇文章主要介紹了怎么用Nginx解決前端跨域問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
前言
在開(kāi)發(fā)靜態(tài)頁(yè)面時(shí)，類似Vue的應(yīng)用，我們常會(huì)調(diào)用一些接口，這些接口極可能是跨域，然后瀏覽器就會(huì)報(bào)cross-origin問(wèn)題不給調(diào)。
最簡(jiǎn)單的解決方法，就是把瀏覽器設(shè)為忽略安全問(wèn)題，設(shè)置--disable-web-security。不過(guò)這種方式開(kāi)發(fā)PC頁(yè)面到還好，如果是移動(dòng)端頁(yè)面就不行了。
解決辦法
使用Nginx轉(zhuǎn)發(fā)請(qǐng)求。把跨域的接口寫成調(diào)本域的接口，然后將這些接口轉(zhuǎn)發(fā)到真正的請(qǐng)求地址。
舉個(gè)栗子
例如我們?cè)陂_(kāi)發(fā)一個(gè)Vue應(yīng)用。
原先：
調(diào)試頁(yè)面是： http://192.168.1.100:8080/
請(qǐng)求的接口是： http://ni.hao.sao/api/get/info
步驟一：
請(qǐng)求的接口是： http://192.168.1.100:8080/api/get/info
PS：這樣就解決了跨域問(wèn)題。
步驟二：
安裝好Nginx后，去到/usr/local/etc/nginx/目錄（這是Mac的），修改nginx.conf文件。
步驟三：
把默認(rèn)的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;
}
}保存后，啟動(dòng)Nginx。
PS：并不需要太了解Nginx的配置，很簡(jiǎn)單的。
步驟四：
訪問(wèn)： http://192.168.1.100:8888/
搞定。
PS：注意訪問(wèn)的端口是‘8888'，有其他域的地址繼續(xù)加location就行了。
錯(cuò)誤示范
我一開(kāi)始不太懂Nginx的配置，以為可以如下配置。
server{
listen 8080;
server_name 192.168.1.100;
location /api{
proxy_pass http://ni.hao.sao/api;
}
}之所以這么寫，是我認(rèn)為這樣可以讓Nginx幫我監(jiān)聽(tīng)8080的請(qǐng)求，然后只轉(zhuǎn)發(fā)匹配的請(qǐng)求。我沒(méi)有意識(shí)到的是Nginx這么寫后，是需要占用8080端口的。
既然需要占用端口，那也就不能再被其他相同協(xié)議的進(jìn)程占用，就導(dǎo)致開(kāi)發(fā)的頁(yè)面無(wú)法以8080端口啟用。經(jīng)同事提點(diǎn)，才想起這事情，換下思路，就有了最上面的方法。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用Nginx解決前端跨域問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
