如何用Nginx解決前端跨域問題
前言
在開發(fā)靜態(tài)頁面時(shí)，類似Vue的應(yīng)用，我們常會(huì)調(diào)用一些接口，這些接口極可能是跨域，然后瀏覽器就會(huì)報(bào)cross-origin問題不給調(diào)。
最簡單的解決方法，就是把瀏覽器設(shè)為忽略安全問題，設(shè)置--disable-web-security。不過這種方式開發(fā)PC頁面到還好，如果是移動(dòng)端頁面就不行了。
解決辦法
使用Nginx轉(zhuǎn)發(fā)請求。把跨域的接口寫成調(diào)本域的接口，然后將這些接口轉(zhuǎn)發(fā)到真正的請求地址。
舉個(gè)栗子
例如我們在開發(fā)一個(gè)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文件。
步驟三：
把默認(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的配置，很簡單的。
步驟四：
訪問： http://192.168.1.100:8888/
搞定。
PS：注意訪問的端口是‘8888'，有其他域的地址繼續(xù)加location就行了。
錯(cuò)誤示范
我一開始不太懂Nginx的配置，以為可以如下配置。
server{
listen 8080;
server_name 192.168.1.100;
location /api{
proxy_pass http://ni.hao.sao/api;
}
}
之所以這么寫，是我認(rèn)為這樣可以讓Nginx幫我監(jiān)聽8080的請求，然后只轉(zhuǎn)發(fā)匹配的請求。我沒有意識到的是Nginx這么寫后，是需要占用8080端口的。
既然需要占用端口，那也就不能再被其他相同協(xié)議的進(jìn)程占用，就導(dǎo)致開發(fā)的頁面無法以8080端口啟用。經(jīng)同事提點(diǎn)，才想起這事情，換下思路，就有了最上面的方法。
總結(jié)
其實(shí)不僅是在開發(fā)調(diào)試時(shí)候能這么干，在生產(chǎn)環(huán)境也能這么玩。利用Nginx轉(zhuǎn)發(fā)請求之后，就能夠讓所要部署的靜態(tài)頁面不需要放在跟請求接口同域的地方。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
為Nginx自定義404，502錯(cuò)誤頁面的方法，需要的朋友可以參考下。2010-12-12
這篇文章主要以圖文結(jié)合的方式為大家詳細(xì)介紹了Nginx簡要安裝配置方法教程，感興趣的小伙伴們可以參考一下2016-05-05
nginx 代理域名到另外一個(gè)域名的實(shí)現(xiàn)方法
本文主要介紹了nginx 代理域名到另外一個(gè)域名的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
這篇文章主要介紹了Nginx新增http_ssl_module模塊的解決方案,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Nginx中l(wèi)ocation匹配以及rewrite重寫跳轉(zhuǎn)詳解
訪問重寫 rewrite 是 Nginx HTTP 請求處理過程中的一個(gè)重要功能,下面這篇文章主要給大家介紹了Nginx中l(wèi)ocation匹配以及rewrite重寫跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2022-03-03
Nginx是一款輕量級的web 服務(wù)器/反向代理服務(wù)器及電子郵件(IMAP/POP3)代理服務(wù)器,這篇文章主要介紹了Nginx概述、命令、配置文件和具體應(yīng)用,需要的朋友可以參考下2023-08-08
本文主要介紹了Nginx搭建自己的CDN服務(wù)器的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
web頁面做了一個(gè)功能,在websocket請求失敗的情況,會(huì)定時(shí)向服務(wù)端進(jìn)行重試進(jìn)行建立連接,這篇文章給大家介紹NGINX阻止指定ip的請求問題及解決方案,感興趣的朋友一起看看吧2024-02-02
這篇文章主要為大家介紹了Nginx基本命令&不停機(jī)版本升級,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Nginx重定向后請求參數(shù)丟失的原因分析及解決方案
在日常開發(fā)和運(yùn)維中,我們經(jīng)常會(huì)遇到需要使用 Nginx 進(jìn)行反向代理的場景,但在配置 proxy_pass 時(shí),有時(shí)候可能會(huì)遇到請求參數(shù)丟失的問題,在這篇文章中,我們將會(huì)詳細(xì)探討這個(gè)問題并給出幾種解決方案,需要的朋友可以參考下2023-11-11