Nginx如何配置跨域资源共享

跨域资源共享（CORS）是前后端分离架构中一个绕不开的话题。你可能会觉得配置起来很麻烦，但实际上，在 Nginx 里搞定它，只需要几个关键的 HTTP 响应头。下面从一个最基础、也最通用的配置入手，看看具体怎么操作。

server {
    listen 80;
    server_name example.com;

    location / {
        # 允许所有来源的请求
        add_header 'Access-Control-Allow-Origin' '*' always;

        # 允许的HTTP方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;

        # 允许的HTTP头
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;

        # 预检请求的有效期
        add_header 'Access-Control-Max-Age' 1728000 always;

        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 实际处理请求
        proxy_pass http://backend_server;
        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;
    }
}

解释

上面这段配置里，每个头都有它的用途，逐一拆开来看会更清楚：

1. Access-Control-Allow-Origin：这个头直接决定了哪些源能被允许访问资源。代码里用了 *，意思是“来者不拒，所有来源都放行”。但在正式的生产环境中，通常不建议这样做——除非你的服务本身就是公开的、不需要限制来源。更稳妥的做法是把它替换成具体的域名，比如 http://example.com。
2. Access-Control-Allow-Methods：它告诉浏览器服务器支持哪些 HTTP 方法。这里列出了 GET, POST, OPTIONS，基本覆盖了常见的请求类型。如果你还需要 PUT、DELETE 等，记得加进去。
3. Access-Control-Allow-Headers：用来声明允许客户端在请求中携带哪些自定义头。默认情况下，Origin、X-Requested-With、Content-Type、Accept 这几个是最常用的。
4. Access-Control-Max-Age：这个值控制的是预检请求（OPTIONS 请求）的缓存有效期。单位是秒，这里设置的是 1728000 秒（大约 20 天）。合理设置这个值能减少不必要的预检请求，对性能提升有帮助。
5. 处理预检请求：当浏览器检测到请求需要预检时（比如使用了非简单头或非简单方法），它会先发一个 OPTIONS 请求。Nginx 通过 if ($request_method = 'OPTIONS') 来捕获它，然后返回 204 No Content，并附带相应的 CORS 头。这样浏览器就知道服务器“允许”这个跨域请求了，后续才会发出真正的 GET 或 POST。

注意事项

• 安全性：生产环境一定要把 Access-Control-Allow-Origin 从 * 改成具体的域名，避免任意站点都能读取你的接口数据。同时，如果涉及凭证（cookies、HTTP 认证），还需要加上 Access-Control-Allow-Credentials: true，并且此时 Access-Control-Allow-Origin 不能为 *，必须明确指定。
• 性能：Access-Control-Max-Age 设置得越大，预检请求的缓存时间就越长，浏览器在有效期内的跨域请求可以直接跳过预检这一步骤，对接口的响应速度有明显提升。但也不建议设置得太极端（比如一年），一般数小时到数天都是合理的。

通过这样一组配置，Nginx 就能轻松支持 CORS，让前后端在跨域场景下顺畅通信。如果后续遇到不同源之间请求被浏览器拦截的问题，不妨先从这几个头检查起。