1 Nginx 核心
Nginx 是一個開源的高性能 HTTP 和反向代理服務器，以輕量級、高并發處理能力和低資源消耗著稱。除作為 Web 服務器外，還可充當郵件代理服務器和通用的 TCP/UDP 代理服務器，廣泛應用于現代 Web 架構中。
在 Windows 系統中使用 Nginx 時，命令行操作與類 Unix 系統存在差異，以下是基本操作：
1.1 環境準備
-
下載 Nginx for Windows 安裝包（需注意 Windows 版本僅支持穩定版，非主線開發版）。
-
解壓至指定目錄（如?
C:\nginx），目錄結構包含?conf（配置文件）、html（靜態資源）等核心文件夾。
1.2 常用命令操作
1.2.1 啟動 Nginx
# 切換到Nginx安裝目錄
cd?C:\nginx# 啟動Nginx服務start?nginx
1.2.2 停止 Nginx# 強制停止服務nginx?-s stop# 優雅停止服務（處理完當前請求后停止）nginx -s quit
1.2.3 重啟 Nginx???????# 先停止服務nginx?-s stop# 再啟動服務start nginx
1.2.4 重載配置???????# 當修改配置文件后，無需重啟服務即可使配置生效nginx?-s reload
2 Nginx 跨域方案2.1 CORS 跨域資源共享方案
Nginx 可通過配置響應頭實現 CORS（Cross-Origin Resource Sharing），解決瀏覽器同源策略限制。
2.1.1 add_header 指令配置
在 Nginx 配置文件中（通常位于安裝目錄下的?conf\nginx.conf），可以使用?add_header指令添加跨域相關響應頭：???????
server?{? ??listen?8080;? ??server_name?localhost;? ??location?~ \.json$?{? ? ? ??root? ?data;? ? ? ??# 安全建議：明確指定允許的域名而非使用通配符，*表示允許所有域名訪問? ? ? ??add_header?'Access-Control-Allow-Origin'?'http://yourdomain.com';? ? ? ??add_header?'Access-Control-Allow-Methods'?'GET, POST, OPTIONS';? ? ? ??add_header?'Access-Control-Allow-Headers'?'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';? ? ? ??# 預檢請求緩存時間（20天）? ? ? ??add_header?'Access-Control-Max-Age'?1728000;? ? ? ??# 允許瀏覽器在跨域請求中攜帶憑據（如cookies），需注意：此時Access-Control-Allow-Origin不可使用通配符? ? ? ??# add_header 'Access-Control-Allow-Credentials' 'true';? ? ? ??# 處理OPTIONS預檢請求? ? ? ??if?($request_method?=?'OPTIONS') {? ? ? ? ? ??return?204;? ? ? ? }? ? }}
2.1.2 前端請求示例 (users.html)
下面是一個前端頁面示例，使用 Fetch API 請求 JSON 數據：???????
<!DOCTYPE?html><html?lang="en"><head>? ??<meta?charset="UTF-8">? ??<meta?name="viewport"?content="width=device-width, initial-scale=1.0">? ??<title>Nginx跨域示例</title></head><body>? ??<script>? ? ? ??// 立即執行的異步函數? ? ? ? (async?function?() {? ? ? ? ? ??try?{? ? ? ? ? ? ? ??// 發送GET請求到Nginx服務器? ? ? ? ? ? ? ??const?response =?await?fetch('http://localhost:8080/users.json', {? ? ? ? ? ? ? ? ? ??method:?'GET',? ? ? ? ? ? ? ? ? ??headers: {? ? ? ? ? ? ? ? ? ? ? ??'Accept':?'application/json'? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? })? ? ? ? ? ? ? ??// 解析響應為JSON格式? ? ? ? ? ? ? ??const?data =?await?response.json();? ? ? ? ? ? ? ??// 打印獲取到的數據? ? ? ? ? ? ? ??console.log('請求響應:', data);? ? ? ? ? ? }?catch?(error) {? ? ? ? ? ? ? ??// 錯誤處理? ? ? ? ? ? ? ??console.error('請求出錯:', error);? ? ? ? ? ? }? ? ? ? })();? ??</script></body></html>
數據文件示例 (users.json) 如下：
[{"id":1,"name":"張三"}]2.2 反向代理方案
除了直接配置 CORS 響應頭，還可以通過 Nginx 反向代理來解決跨域問題，這種方法可將跨域請求轉為同域請求，規避瀏覽器同源策略，此方法在微服務架構中尤為常見。
2.2.1 Nginx 代理配置
在 Nginx 配置文件中添加以下代理規則：???????
server?{? ??listen?8080;? ??server_name?localhost;? ??# 匹配以/api開頭的URL路徑? ??location?/api {? ? ? ??# 將請求代理到本地4000端口的服務（注意：proxy_pass末尾是否添加斜杠會影響路徑拼接）? ? ? ??proxy_pass?http://localhost:4000;? ? ? ??# 常用代理配置項（傳遞客戶端真實信息）? ? ? ??proxy_set_header?Host?$host;? ? ? ??proxy_set_header?X-Real-IP?$remote_addr;? ? ? ??proxy_set_header?X-Forwarded-For?$proxy_add_x_forwarded_for;? ? ? ??proxy_set_header?X-Forwarded-Proto?$scheme;? ? }}
2.2.2 后端服務示例 (serverb.js)
使用 Express 框架創建一個簡單的后端服務：???????
// serverb.jsconst?express =?require('express');const?app =?express();const?users = [{id:1,?name:'張三'}];// 處理API請求（注意：接口路徑需與Nginx代理規則匹配）app.get('/api/users',?(req, res) =>?{? ? res.json(users);});const?port =?4000;app.listen(port,?() =>?{? ??console.log(`后端服務運行在 http://localhost:${port}`);});
2.2.3 前端通過代理請求數據???????
<!DOCTYPE?html><html?lang="en"><head>? ??<meta?charset="UTF-8">? ??<meta?name="viewport"?content="width=device-width, initial-scale=1.0">? ??<title>Nginx代理跨域示例</title></head><body>? ??<script>? ? ? ? (async?function?() {? ? ? ? ? ??try?{? ? ? ? ? ? ? ??// 通過Nginx代理訪問后端服務? ? ? ? ? ? ? ??const?response =?await?fetch('http://localhost:8080/api/users', {? ? ? ? ? ? ? ? ? ??method:?'GET',? ? ? ? ? ? ? ? ? ??headers: {? ? ? ? ? ? ? ? ? ? ? ??'Accept':?'application/json'? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? })? ? ? ? ? ? ? ??const?data =?await?response.json();? ? ? ? ? ? ? ??console.log('通過代理獲取的數據:', data);? ? ? ? ? ? }?catch?(error) {? ? ? ? ? ? ? ??console.error('代理請求出錯:', error);? ? ? ? ? ? }? ? ? ? })();? ??</script></body></html>
2.3 兩種跨域方案對比
| 維度 | CORS 方案 | 反向代理方案 |
|---|---|---|
| 核心原理 | 瀏覽器基于響應頭允許跨域 | 將跨域請求轉為同域請求 |
| 配置位置 | Nginx 響應頭配置（add_header） | Nginx 代理規則配置（proxy_pass） |
| 適用場景 | 前后端域名不同，需瀏覽器直接跨域 | 前端與 Nginx 同域名，后端多服務部署 |
| 安全性 | 需嚴格控制Allow-Origin，避免通配符 | 前端無跨域風險，Nginx 可統一鑒權 |
| 性能影響 | 存在預檢請求（OPTIONS）額外開銷 | 無預檢開銷，性能更優 |
| 前端依賴 | 需前端請求配合 CORS 規則（如憑據設置） | 前端無需特殊處理，按同域請求即可 |
本文系統介紹了 Nginx 在 Windows 環境下的基礎操作，以及兩種主流跨域解決方案：通過add_header配置 CORS 響應頭和基于反向代理的跨域處理機制。在實際開發中，可依據項目場景靈活選擇方案：
-
當前后端域名不同且需瀏覽器直接訪問跨域資源時，優先采用 CORS 方案，但需嚴格限定域名白名單，避免通配符濫用帶來的安全風險。
-
若項目采用微服務架構，或需要集中處理請求轉發、負載均衡及緩存策略，反向代理方案更為高效 —— 它通過將跨域請求轉換為同域請求，從根本上規避瀏覽器同源策略限制。
Nginx 憑借高性能與靈活配置特性，成為跨域問題的理想解決方案，同時在負載均衡、緩存優化等場景中也能發揮核心作用。實際使用時，建議養成定期備份配置文件的習慣，修改配置后通過nginx -t命令校驗語法正確性，再通過nginx -s reload平滑重載配置，確保服務穩定運行。通過 Nginx 處理跨域問題，既能發揮其高并發處理優勢，又能簡化前后端架構設計，是現代 Web 開發中不可或缺的基礎技術方案。
