Nginx配置CORS解决前端跨域问题详解

1. 为什么前端开发绕不开跨域问题

作为前端开发者，你一定遇到过这样的报错："No 'Access-Control-Allow-Origin' header is present on the requested resource"。这个看似简单的错误背后，隐藏着浏览器最重要的安全机制之一 - 同源策略。

1.1 同源策略的来龙去脉

同源策略（Same-Origin Policy）是浏览器最基础的安全机制，它规定了一个域下的文档或脚本如何与另一个域的资源进行交互。所谓"同源"，需要满足三个条件完全一致：

• 协议相同（http/https）
• 域名相同（包括子域名）
• 端口相同（默认80/443）

举个例子：

• https://example.com/app1 和 https://example.com/app2 是同源
• http://example.com 和 https://example.com 不同源（协议不同）
• https://example.com 和 https://api.example.com 不同源（域名不同）
• https://example.com 和 https://example.com:8080 不同源（端口不同）

这个策略的存在意义重大。想象一下，如果没有同源策略，恶意网站可以：

• 读取你Gmail中的邮件内容
• 获取你在银行网站的登录状态
• 篡改你在社交网站上的数据

1.2 CORS机制的工作原理

CORS（Cross-Origin Resource Sharing）是现代浏览器实现的一套机制，它允许服务器声明哪些跨域请求是被允许的。其核心是通过HTTP头部来沟通跨域权限：

• 简单请求：直接发送实际请求，浏览器检查响应头
• 复杂请求：先发送OPTIONS预检请求，通过后再发实际请求

CORS相关的HTTP头部包括：

• Access-Control-Allow-Origin: 允许的源
• Access-Control-Allow-Methods: 允许的方法
• Access-Control-Allow-Headers: 允许的头部
• Access-Control-Allow-Credentials: 是否允许携带凭证
• Access-Control-Max-Age: 预检结果缓存时间

2. Nginx作为CORS代理的优势

2.1 为什么选择Nginx解决跨域

在众多解决跨域方案中（如JSONP、代理服务器、CORS等），通过Nginx配置CORS具有独特优势：

1. 性能无损：Nginx本身就是高性能的反向代理，增加CORS头部几乎不影响性能
2. 配置灵活：可以根据路径、域名等条件精细控制跨域权限
3. 无需修改代码：后端服务无需任何改动，纯运维层面解决
4. 支持所有HTTP方法：包括复杂的PUT、DELETE等操作
5. 支持凭证传递：可以安全地处理需要Cookie的场景

2.2 典型应用场景分析

场景一：前后端分离架构

• 前端：https://www.example.com
• API：https://api.example.com
• 需要允许前端域名访问API

场景二：多团队协作

• 主站：https://company.com
• 子产品：https://product.company.com
• 需要共享用户认证信息

场景三：第三方集成

• 你的服务：https://service.com
• 合作伙伴：https://partner.com
• 需要安全地开放部分API

3. Nginx CORS配置详解

3.1 基础配置模板

nginx复制server {
    listen 80;
    server_name api.example.com;

    location / {
        # 核心CORS配置
        add_header 'Access-Control-Allow-Origin' 'https://www.example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, X-Requested-With';
        add_header 'Access-Control-Allow-Credentials' 'true';
        
        # 预检请求处理
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            ad