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
1.2.2 停止 Nginx
nginx -s stopnginx -s quit
1.2.3 重启 Nginx
1.2.4 重载配置
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'; add_header 'Access-Control-Max-Age' 1728000; 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 { const response = await fetch('http://localhost:8080/users.json', { method: 'GET', headers: { 'Accept': 'application/json' } }) const data = await response.json(); console.log('请求响应:', data); } catch (error) { console.error('请求出错:', error); } })(); </script></body></html>
数据文件示例 (users.json) 如下：
2.2 反向代理方案
除了直接配置 CORS 响应头，还可以通过 Nginx 反向代理来解决跨域问题，这种方法可将跨域请求转为同域请求，规避浏览器同源策略，此方法在微服务架构中尤为常见。
2.2.1 Nginx 代理配置
在 Nginx 配置文件中添加以下代理规则：
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 后端服务示例 (serverb.js)
使用 Express 框架创建一个简单的后端服务：
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(`后端服务运行在 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 { 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 开发中不可或缺的基础技术方案。
阅读原文：原文链接
该文章在 2025/7/1 23:50:41 编辑过
400 186 1886
