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.js
const 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 開發中不可或缺的基礎技術方案。
下一章將介紹 Node中間件?方案 ,敬請期待!