如何用Nginx解決前端跨域問題
前言
在開發(fā)靜態(tài)頁面時，類似Vue的應(yīng)用，我們常會調(diào)用一些接口，這些接口極可能是跨域，然后瀏覽器就會報cross-origin問題不給調(diào)。
最簡單的解決方法，就是把瀏覽器設(shè)為忽略安全問題，設(shè)置--disable-web-security。不過這種方式開發(fā)PC頁面到還好，如果是移動端頁面就不行了。
解決辦法
使用Nginx轉(zhuǎn)發(fā)請求。把跨域的接口寫成調(diào)本域的接口，然后將這些接口轉(zhuǎn)發(fā)到真正的請求地址。
舉個栗子
例如我們在開發(fā)一個Vue應(yīng)用。
原先：
調(diào)試頁面是： 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'，有其他域的地址繼續(xù)加location就行了。
錯誤示范
我一開始不太懂Nginx的配置，以為可以如下配置。
server{
listen 8080;
server_name 192.168.1.100;
location /api{
proxy_pass http://ni.hao.sao/api;
}
}
之所以這么寫，是我認為這樣可以讓Nginx幫我監(jiān)聽8080的請求，然后只轉(zhuǎn)發(fā)匹配的請求。我沒有意識到的是Nginx這么寫后，是需要占用8080端口的。
既然需要占用端口，那也就不能再被其他相同協(xié)議的進程占用，就導(dǎo)致開發(fā)的頁面無法以8080端口啟用。經(jīng)同事提點，才想起這事情，換下思路，就有了最上面的方法。
總結(jié)
其實不僅是在開發(fā)調(diào)試時候能這么干，在生產(chǎn)環(huán)境也能這么玩。利用Nginx轉(zhuǎn)發(fā)請求之后，就能夠讓所要部署的靜態(tài)頁面不需要放在跟請求接口同域的地方。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Nginx熱部署的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
Nginx中roxy_set_header與add_header區(qū)別舉例淺析
proxy_set_header是一個 Nginx 配置指令,用于設(shè)置將要轉(zhuǎn)發(fā)到后端服務(wù)器的 HTTP 請求頭,這篇文章主要給大家介紹了關(guān)于Nginx中roxy_set_header與add_header區(qū)別的相關(guān)資料,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Centos下編譯安裝Nginx的教程詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
nginx運行報錯:unknown directive “stream“的解決方案
這篇文章主要給大家介紹了nginx 運行報錯：unknown directive "stream"的原因,主要是因為沒有安裝stream模塊導(dǎo)致的,我們只需要編譯安裝一下stream模塊即可解決這個問題,文中有詳細的解決方案,需要的朋友可以參考下2023-09-09
使用Bash腳本和Logrotate實現(xiàn)Nginx日志切割的方法
Logrotate是一個Linux系統(tǒng)上用來管理日志文件的工具,它可以定期輪轉(zhuǎn)日志文件、壓縮舊的日志文件以及刪除過期的日志文件,這篇文章主要介紹了使用Bash腳本和Logrotate實現(xiàn)Nginx日志切割,需要的朋友可以參考下2024-05-05
Linux中Nginx的防盜鏈和優(yōu)化的實現(xiàn)代碼
今天是周末小編在值班哈，很開森，工作使我快樂，本文重點給大家介紹Linux中Nginx的防盜鏈和優(yōu)化問題及實現(xiàn)代碼，需要的朋友跟隨小編一起看看吧2021-06-06
nginx 不同的訪問路徑對應(yīng)項目不同的目錄的實現(xiàn)方法
要在 Nginx 中配置不同的訪問路徑對應(yīng)不同的項目目錄,可以使用 Nginx 的?location?指令來實現(xiàn),本文主要介紹了nginx不同的訪問路徑對應(yīng)項目不同的目錄的實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2023-09-09
Nginx listen 監(jiān)聽端口的實現(xiàn)配置
本文將介紹Nginx的listen指令及其在配置文件中的應(yīng)用,通過了解listen指令,我們可以知道Nginx如何監(jiān)聽端口,并配置相應(yīng)的服務(wù)器塊來處理進入的請求2023-12-12
這篇文章主要介紹了nginx命令參數(shù)用法詳細介紹的相關(guān)資料,希望通過本文可以幫助到大家理解并應(yīng)用這部分知識，需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了關(guān)于nginx中一個請求的count計數(shù)跟蹤的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01