前端跨域解决方案（6）：Nginx

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

bash 复制代码

# 切换到Nginx安装目录
cd C:\nginx

# 启动Nginx服务
start nginx

1.2.2 停止 Nginx

bash 复制代码

# 强制停止服务
nginx -s stop

# 优雅停止服务（处理完当前请求后停止）
nginx -s quit

1.2.3 重启 Nginx

bash 复制代码

# 先停止服务
nginx -s stop

# 再启动服务
start nginx

1.2.4 重载配置

bash 复制代码

# 当修改配置文件后，无需重启服务即可使配置生效
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指令添加跨域相关响应头：

bash 复制代码

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 数据：

html 复制代码

<!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) 如下：

javascript 复制代码

[{"id":1,"name":"张三"}]

2.2 反向代理方案

除了直接配置 CORS 响应头，还可以通过 Nginx 反向代理来解决跨域问题，这种方法可将跨域请求转为同域请求，规避浏览器同源策略，此方法在微服务架构中尤为常见。

2.2.1 Nginx 代理配置

在 Nginx 配置文件中添加以下代理规则：

bash 复制代码

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 框架创建一个简单的后端服务：

javascript 复制代码

// 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 前端通过代理请求数据

html 复制代码

<!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中间件方案，敬请期待！