1 Nginx 核心
Nginx 是一個(gè)開(kāi)源的高性能 HTTP 和反向代理服務(wù)器，以輕量級(jí)、高并發(fā)處理能力和低資源消耗著稱(chēng)。除作為 Web 服務(wù)器外，還可充當(dāng)郵件代理服務(wù)器和通用的 TCP/UDP 代理服務(wù)器，廣泛應(yīng)用于現(xiàn)代 Web 架構(gòu)中。
在 Windows 系統(tǒng)中使用 Nginx 時(shí)，命令行操作與類(lèi) Unix 系統(tǒng)存在差異，以下是基本操作：
1.1 環(huán)境準(zhǔn)備
- 下載 Nginx for Windows 安裝包（需注意 Windows 版本僅支持穩(wěn)定版，非主線開(kāi)發(fā)版）。
- 解壓至指定目錄（如
C:\nginx），目錄結(jié)構(gòu)包含 conf（配置文件）、html（靜態(tài)資源）等核心文件夾。
1.2 常用命令操作
1.2.1 啟動(dòng) Nginx
1.2.2 停止 Nginx
nginx -s stopnginx -s quit
1.2.3 重啟 Nginx
1.2.4 重載配置
2 Nginx 跨域方案
2.1 CORS 跨域資源共享方案
Nginx 可通過(guò)配置響應(yīng)頭實(shí)現(xiàn) CORS（Cross-Origin Resource Sharing），解決瀏覽器同源策略限制。
2.1.1 add_header 指令配置
在 Nginx 配置文件中（通常位于安裝目錄下的 conf\nginx.conf），可以使用 add_header指令添加跨域相關(guān)響應(yīng)頭：
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'; add_header 'Access-Control-Max-Age' 1728000; if ($request_method = 'OPTIONS') { return 204; } }}
2.1.2 前端請(qǐng)求示例 (users.html)
下面是一個(gè)前端頁(yè)面示例，使用 Fetch API 請(qǐng)求 JSON 數(shù)據(jù)：
<!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 { const response = await fetch('http://localhost:8080/users.json', { method: 'GET', headers: { 'Accept': 'application/json' } }) const data = await response.json(); console.log('請(qǐng)求響應(yīng):', data); } catch (error) { console.error('請(qǐng)求出錯(cuò):', error); } })(); </script></body></html>
數(shù)據(jù)文件示例 (users.json) 如下：
2.2 反向代理方案
除了直接配置 CORS 響應(yīng)頭，還可以通過(guò) Nginx 反向代理來(lái)解決跨域問(wèn)題，這種方法可將跨域請(qǐng)求轉(zhuǎn)為同域請(qǐng)求，規(guī)避瀏覽器同源策略，此方法在微服務(wù)架構(gòu)中尤為常見(jiàn)。
2.2.1 Nginx 代理配置
在 Nginx 配置文件中添加以下代理規(guī)則：
server { listen 8080; server_name localhost; location /api { 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 后端服務(wù)示例 (serverb.js)
使用 Express 框架創(chuàng)建一個(gè)簡(jiǎn)單的后端服務(wù)：
const express = require('express');const app = express();const users = [{id:1, name:'張三'}];app.get('/api/users', (req, res) => { res.json(users);});const port = 4000;app.listen(port, () => { console.log(`后端服務(wù)運(yùn)行在 http://localhost:${port}`);});
2.2.3 前端通過(guò)代理請(qǐng)求數(shù)據(jù)
<!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 { const response = await fetch('http://localhost:8080/api/users', { method: 'GET', headers: { 'Accept': 'application/json' } }) const data = await response.json(); console.log('通過(guò)代理獲取的數(shù)據(jù):', data); } catch (error) { console.error('代理請(qǐng)求出錯(cuò):', error); } })(); </script></body></html>
2.3 兩種跨域方案對(duì)比
| 維度 | CORS 方案 | 反向代理方案 |
|---|
| 核心原理 | 瀏覽器基于響應(yīng)頭允許跨域 | 將跨域請(qǐng)求轉(zhuǎn)為同域請(qǐng)求 |
| 配置位置 | Nginx 響應(yīng)頭配置（add_header） | Nginx 代理規(guī)則配置（proxy_pass） |
| 適用場(chǎng)景 | 前后端域名不同，需瀏覽器直接跨域 | 前端與 Nginx 同域名，后端多服務(wù)部署 |
| 安全性 | 需嚴(yán)格控制Allow-Origin，避免通配符 | 前端無(wú)跨域風(fēng)險(xiǎn)，Nginx 可統(tǒng)一鑒權(quán) |
| 性能影響 | 存在預(yù)檢請(qǐng)求（OPTIONS）額外開(kāi)銷(xiāo) | 無(wú)預(yù)檢開(kāi)銷(xiāo)，性能更優(yōu) |
| 前端依賴(lài) | 需前端請(qǐng)求配合 CORS 規(guī)則（如憑據(jù)設(shè)置） | 前端無(wú)需特殊處理，按同域請(qǐng)求即可 |
本文系統(tǒng)介紹了 Nginx 在 Windows 環(huán)境下的基礎(chǔ)操作，以及兩種主流跨域解決方案：通過(guò)add_header配置 CORS 響應(yīng)頭和基于反向代理的跨域處理機(jī)制。在實(shí)際開(kāi)發(fā)中，可依據(jù)項(xiàng)目場(chǎng)景靈活選擇方案：
- 當(dāng)前后端域名不同且需瀏覽器直接訪問(wèn)跨域資源時(shí)，優(yōu)先采用 CORS 方案，但需嚴(yán)格限定域名白名單，避免通配符濫用帶來(lái)的安全風(fēng)險(xiǎn)。
- 若項(xiàng)目采用微服務(wù)架構(gòu)，或需要集中處理請(qǐng)求轉(zhuǎn)發(fā)、負(fù)載均衡及緩存策略，反向代理方案更為高效 —— 它通過(guò)將跨域請(qǐng)求轉(zhuǎn)換為同域請(qǐng)求，從根本上規(guī)避瀏覽器同源策略限制。
Nginx 憑借高性能與靈活配置特性，成為跨域問(wèn)題的理想解決方案，同時(shí)在負(fù)載均衡、緩存優(yōu)化等場(chǎng)景中也能發(fā)揮核心作用。實(shí)際使用時(shí)，建議養(yǎng)成定期備份配置文件的習(xí)慣，修改配置后通過(guò)nginx -t命令校驗(yàn)語(yǔ)法正確性，再通過(guò)nginx -s reload平滑重載配置，確保服務(wù)穩(wěn)定運(yùn)行。通過(guò) Nginx 處理跨域問(wèn)題，既能發(fā)揮其高并發(fā)處理優(yōu)勢(shì)，又能簡(jiǎn)化前后端架構(gòu)設(shè)計(jì)，是現(xiàn)代 Web 開(kāi)發(fā)中不可或缺的基礎(chǔ)技術(shù)方案。
閱讀原文：原文鏈接
該文章在 2025/7/1 23:50:41 編輯過(guò)
400 186 1886
