通過 Nginx 代理轉發配置實現跨域（API 代理轉發）
在WEB開發中，我們經常涉及到跨域的請求，解決跨域問題的方式有很多，比如有window.name、iframe、JSONP、CORS等等，就不詳細展開了，涉及到 協議、端口 不一樣的跨域請求方式是采用代理，這里我們重點聊聊Nginx代理的方式。
場景
本地啟動了一個前后端分離的WEB應用，端口為：3000，可以通過http://127.0.0.1:3000訪問前端頁面，頁面中有些Ajax請求的地址為http://127.0.0.1:3000/api/getList，一般情況下肯定是404或者請求失敗，如下圖：
這種后端服務的接口存放在於其他的服務器中，比如在公司內網可以通過http://172.30.1.123:8081/api/getList訪問到測試環境中的服務接口。
這種情況的請求就涉及到端口不一樣的跨域了，那么我們可以利用Nginx代理請求。
Nginx代理配置參考
首先找到Nginx配置文件：
- Windows下路徑就是你安裝Nginx目錄下找，比如我的放在C盤根目錄，那就是：
c:\nginx\conf\nginx.conf - Mac系統配置文件路徑在:
/usr/local/etc/nginx/nginx.conf, Finder下通過Shift+Command+G，輸入/usr/local/etc/nginx/進入該目錄。
在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;
}
}
上面的配置的可以理解為：
監聽80端口（Nginx默認啟動了80端口），將
http://127.0.0.1的所有請求服務轉發到127.0.0.1端口為3000；
將http://127.0.0.1/api/或者http://127.0.0.1/api/getList請求轉發到http://172.30.1.123:8081
完成
經過上面的配置我們可以直接通過http://127.0.0.1訪問我們的WEB應用（如果覺得IP訪問），而相關的API請求也會根據我們的Nginx配置進行相應的請求，瀏覽器端看到的/api/getList請求的是127.0.0.1端口為80的端口，但是實際上這個請求已經被我們的Nginx轉發指向http://172.30.1.123:8081/api/getList
友情提示：
Nginx每一條配置語句后面都必須要加分好
;否則會報配置錯誤，自己還一臉懵逼。
拓展
綁定host
如果你覺得輸入IP訪問不爽那你可以自己修改host，推薦host修改神器：SwitchHosts。
如果綁定了host，在Nginx配置中當然也可以直接配置你指定的域名，譬如：
server {
listen 80;
server_name www.domain.com; #這里將IP改成你的域名
#...
}
修改host后你可以直接通過你的域名訪問，如：http://www.domain.com
關於location
上面的配置你可能會對localtion后面的配置感到疑惑，關於localtion后面的常用的需求有：
localtion / {
# 所有請求都匹配以下規則
# 因為所有的地址都以 / 開頭，所以這條規則將匹配到所有請求
# xxx 你的配置寫在這里
}
location = / {
# 精確匹配 / ，后面帶任何字符串的地址都不符合
}
localtion /api {
# 匹配任何 /api 開頭的URL，包括 /api 后面任意的, 比如 /api/getList
# 匹配符合以后，還要繼續往下搜索
# 只有后面的正則表達式沒有匹配到時，這一條才會采用這一條
}
localtion ~ /api/abc {
# 匹配任何 /api/abc 開頭的URL，包括 /api/abc 后面任意的, 比如 /api/abc/getList
# 匹配符合以后，還要繼續往下搜索
# 只有后面的正則表達式沒有匹配到時，這一條才會采用這一條
}
- 以
/通用匹配, 如果沒有其它匹配,任何請求都會匹配到 =開頭表示精確匹配
如 A 中只匹配根目錄結尾的請求，后面不能帶任何字符串。^~開頭表示uri以某個常規字符串開頭，不是正則匹配~開頭表示區分大小寫的正則匹配;~*開頭表示不區分大小寫的正則匹配
原文：https://blog.csdn.net/qq_36486737/article/details/83141598