17站長(zhǎng)網(wǎng) › 首頁(yè) ›網(wǎng)站› 服務(wù)器 › 查看內(nèi)容

通過Nginx代理轉(zhuǎn)發(fā)配置實(shí)現(xiàn)跨域的方法

2022-10-15 09:37| 查看: 1252 |來源: 互聯(lián)網(wǎng)

在WEB開發(fā)中，我們經(jīng)常涉及到跨域的請(qǐng)求，解決跨域問題的方式有很多，比如有window.name、iframe、JSONP、CORS等等，就不詳細(xì)展開了，涉及到協(xié)議、端口不一樣 ...

在WEB開發(fā)中，我們經(jīng)常涉及到跨域的請(qǐng)求，解決跨域問題的方式有很多，比如有window.name、iframe、JSONP、CORS等等，就不詳細(xì)展開了，涉及到協(xié)議、端口不一樣的跨域請(qǐng)求方式是采用代理，這里我們重點(diǎn)聊聊Nginx代理的方式。

場(chǎng)景
本地啟動(dòng)了一個(gè)前后端分離的WEB應(yīng)用，端口為：3000，可以通過http://127.0.0.1:3000訪問前端頁(yè)面，頁(yè)面中有些Ajax請(qǐng)求的地址為http://127.0.0.1:3000/api/getList，一般情況下肯定是404或者請(qǐng)求失敗，如下圖：

這種后端服務(wù)的接口存放在于其他的服務(wù)器中，比如在公司內(nèi)網(wǎng)可以通過http://172.30.1.123:8081/api/getList訪問到測(cè)試環(huán)境中的服務(wù)接口。

這種情況的請(qǐng)求就涉及到端口不一樣的跨域了，那么我們可以利用Nginx代理請(qǐng)求。

Nginx代理配置參考

首先找到Nginx配置文件：

Windows下路徑就是你安裝Nginx目錄下找，比如我的放在C盤根目錄，那就是：c:\nginx\conf\nginx.conf
Mac系統(tǒng)配置文件路徑在: /usr/local/etc/nginx/nginx.conf, Finder下通過Shift+Command+G，輸入/usr/local/etc/nginx/進(jìn)入該目錄。

在Nginx配置文件中添加如下配置：

server {
 listen 80;
 server_name 127.0.0.1;

 location / {
 proxy_pass http://127.0.0.1:3000;
 }

 location ~ /api/ {
 proxy_pass http://172.30.1.123:8081;
 }
}

上面的配置的可以理解為：

監(jiān)聽80端口（Nginx默認(rèn)啟動(dòng)了80端口），將http://127.0.0.1的所有請(qǐng)求服務(wù)轉(zhuǎn)發(fā)到127.0.0.1端口為3000；
將http://127.0.0.1/api/或者h(yuǎn)ttp://127.0.0.1/api/getList請(qǐng)求轉(zhuǎn)發(fā)到http://172.30.1.123:8081

完成

經(jīng)過上面的配置我們可以直接通過http://127.0.0.1訪問我們的WEB應(yīng)用（如果采用IP訪問），而相關(guān)的API請(qǐng)求也會(huì)根據(jù)我們的Nginx配置進(jìn)行相應(yīng)的請(qǐng)求，瀏覽器端看到的/api/getList請(qǐng)求的是127.0.0.1端口為80的端口，但是實(shí)際上這個(gè)請(qǐng)求已經(jīng)被我們的Nginx轉(zhuǎn)發(fā)指向http://172.30.1.123:8081/api/getList

優(yōu)化：

基本的代理功能就像上面如此簡(jiǎn)單的配置即可。

但是，當(dāng)我們需要獲取真實(shí)IP的業(yè)務(wù)時(shí)，還需要添加關(guān)于真實(shí)IP的配置，如下：

server {
 listen 80;
 server_name 127.0.0.1;

 location / {
 proxy_pass http://127.0.0.1:3000;
 proxy_set_header Host $host:80;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }

 location ~ /api/ {
 proxy_pass http://172.30.1.123:8081;
 proxy_set_header Host $host:80;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
}

proxy_set_header這個(gè)配置是改變HTTP的請(qǐng)求頭，而Host是請(qǐng)求的主機(jī)名，X-Real-IP是請(qǐng)求的真實(shí)IP，X-Forwarded-For表示請(qǐng)求是由誰(shuí)發(fā)起的。

因?yàn)槲覀兊腘ginx在這里屬于代理服務(wù)器，通過proxy_set_header配置這些信息目的是讓服務(wù)端獲取到真實(shí)的請(qǐng)求頭。

友情提示：

Nginx每一條配置語(yǔ)句后面都必須要加分好; 否則會(huì)報(bào)配置錯(cuò)誤，自己還一臉懵逼。

拓展

綁定host

如果你覺得輸入IP訪問不爽那你可以自己修改host，推薦host修改神器：SwitchHosts。

host修改參考：

127.0.0.1 www.domain.com  #改成你需要的任何域名

如果綁定了host，在Nginx配置中當(dāng)然也可以直接配置你指定的域名，譬如：

server {
 listen 80;
 server_name www.domain.com; #這里將IP改成你的域名
 #...
}

修改host后你可以直接通過你的域名訪問，如：http://www.domain.com

關(guān)于location

上面的配置你可能會(huì)對(duì)localtion后面的配置感到疑惑，關(guān)于localtion后面的常用的需求有：

localtion / {
 # 所有請(qǐng)求都匹配以下規(guī)則
 # 因?yàn)樗械牡刂范家?nbsp;/ 開頭，所以這條規(guī)則將匹配到所有請(qǐng)求
 # xxx 你的配置寫在這里
}

location = / {
 # 精確匹配 / ，后面帶任何字符串的地址都不符合
}

localtion /api {
 # 匹配任何 /api 開頭的URL，包括 /api 后面任意的, 比如 /api/getList
 # 匹配符合以后，還要繼續(xù)往下搜索
 # 只有后面的正則表達(dá)式?jīng)]有匹配到時(shí)，這一條才會(huì)采用這一條
}

localtion ~ /api/abc {
 # 匹配任何 /api/abc 開頭的URL，包括 /api/abc 后面任意的, 比如 /api/abc/getList
 # 匹配符合以后，還要繼續(xù)往下搜索
 # 只有后面的正則表達(dá)式?jīng)]有匹配到時(shí)，這一條才會(huì)采用這一條
}
以/ 通用匹配, 如果沒有其它匹配,任何請(qǐng)求都會(huì)匹配到
=開頭表示精確匹配
如 A 中只匹配根目錄結(jié)尾的請(qǐng)求，后面不能帶任何字符串。
^~ 開頭表示uri以某個(gè)常規(guī)字符串開頭，不是正則匹配
~ 開頭表示區(qū)分大小寫的正則匹配;
~* 開頭表示不區(qū)分大小寫的正則匹配

更多詳細(xì)localtion的正則匹配規(guī)則可參考：nginx配置location總結(jié)及rewrite規(guī)則寫法

后記

筆者也是Nginx的初級(jí)使用者，希望通過通俗易懂的方式記錄這些知識(shí)，分享給有需要的人，一起鉆研學(xué)習(xí)，如有紕漏，歡迎指正，謝謝！

總結(jié)

以上就是小編給大家介紹的通過Nginx代理轉(zhuǎn)發(fā)配置實(shí)現(xiàn)跨域的方法，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

本文最后更新于 2022-10-15 09:37，某些文章具有時(shí)效性，若有錯(cuò)誤或已失效，請(qǐng)?jiān)诰W(wǎng)站留言或聯(lián)系站長(zhǎng)：[email protected]

·END·

站長(zhǎng)網(wǎng)微信號(hào)：w17tui，關(guān)注站長(zhǎng)、創(chuàng)業(yè)、關(guān)注互聯(lián)網(wǎng)人 - 互聯(lián)網(wǎng)創(chuàng)業(yè)者營(yíng)銷服務(wù)中心

免責(zé)聲明：本站部分文章和圖片均來自用戶投稿和網(wǎng)絡(luò)收集，旨在傳播知識(shí)，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途，如果損害了您的權(quán)利，請(qǐng)聯(lián)系我們及時(shí)修正或刪除。謝謝！

下一篇：linux文件目錄管理命令整理總結(jié)上一篇：win10中docker部署和運(yùn)行countly-server的流程

17站長(zhǎng)網(wǎng)微信二維碼

始終以前瞻性的眼光聚焦站長(zhǎng)、創(chuàng)業(yè)、互聯(lián)網(wǎng)等領(lǐng)域，為您提供最新最全的互聯(lián)網(wǎng)資訊，幫助站長(zhǎng)轉(zhuǎn)型升級(jí)，為互聯(lián)網(wǎng)創(chuàng)業(yè)者提供更加優(yōu)質(zhì)的創(chuàng)業(yè)信息和品牌營(yíng)銷服務(wù)，與站長(zhǎng)一起進(jìn)步！讓互聯(lián)網(wǎng)創(chuàng)業(yè)者不再孤獨(dú)！

掃一掃，關(guān)注站長(zhǎng)網(wǎng)微信

青草久久影院-青草久久伊人-青草久久久-青草久久精品亚洲综合专区-SM双性精跪趴灌憋尿调教H-SM脚奴调教丨踩踏贱奴

通過Nginx代理轉(zhuǎn)發(fā)配置實(shí)現(xiàn)跨域的方法

大家都在看

相關(guān)分類

熱門排行

最近更新