Nginx解决跨域问题的两种核心方案与实战配置

1. 跨域问题的本质与Nginx的解决思路

前端开发中最常遇到的"跨域"问题，本质上源于浏览器的同源策略（Same-Origin Policy）。这个安全机制限制了来自不同源（协议、域名、端口任一不同）的脚本交互。在实际项目中，当前端应用（如http://localhost:3000）需要调用后端API（如https://api.example.com）时，就会触发跨域拦截。

Nginx作为高性能的反向代理服务器，可以通过以下两种核心方式解决跨域：

1. 代理转发：将不同域的API请求统一转发到同源地址
2. CORS配置：直接在后端服务器响应中添加跨域头信息

我在实际项目中最常用的是第一种方案，因为它不依赖后端代码修改，配置灵活且性能损耗极小。下面通过具体配置示例演示如何实现。

2. Nginx代理转发方案详解

2.1 基础代理配置

假设前端运行在http://localhost:8080，需要访问https://api.service.com的接口。修改Nginx配置文件（通常位于/etc/nginx/conf.d/default.conf）：

nginx复制server {
    listen 80;
    server_name localhost;

    location /api {
        proxy_pass https://api.service.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }
}

关键参数解析：

• location /api：捕获所有以/api开头的请求
• proxy_pass：将请求转发到目标服务器
• proxy_set_header：保留原始请求头信息

注意：生产环境建议使用HTTPS并配置SSL证书，避免混合内容警告

2.2 路径重写技巧

当后端API路径前缀与代理路径不匹配时，需要使