Nginx配置CORS解决跨域问题的完整指南

1. 跨域问题与Nginx解决方案概述

前端开发中最让人头疼的问题之一就是跨域限制。当你的前端应用运行在http://localhost:3001，而API服务在http://localhost时，浏览器会严格阻止这种跨域请求。这不是服务器拒绝响应，而是浏览器出于安全考虑实施的同源策略。

Nginx作为高性能的反向代理服务器，可以通过配置CORS（跨域资源共享）头信息来解决这个问题。但很多开发者只配置了基础的Access-Control-Allow-Origin头，却忽略了OPTIONS预检请求的处理，导致看似配置正确却依然报错。

2. CORS机制深度解析

2.1 为什么需要CORS

浏览器同源策略要求脚本只能访问与文档同源的资源。这是为了防止恶意网站窃取用户数据。CORS机制允许服务器声明哪些外部源可以访问资源，在保证安全的前提下实现跨域通信。

2.2 简单请求与预检请求的区别

不是所有跨域请求都会触发预检。满足以下所有条件的属于简单请求：

• 使用GET、HEAD或POST方法
• 仅包含Accept、Accept-Language、Content-Language、Content-Type头
• Content-Type仅限于application/x-www-form-urlencoded、multipart/form-data或text/plain

不满足上述条件的请求（如使用PUT/DELETE方法，或包含自定义头）会先发送OPTIONS预检请求，获得服务器许可后才发送实际请求。

3. Nginx配置详解

3.1 基础CORS配置

最基本的CORS配置需要设置以下头信息：

nginx复制add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type';

但这种配置有两个常见问题：

1. 不会对4xx/5xx错误响应添加CORS头
2. 没有正确处理OPTIONS预检请求

3.2 完整解决方案配置

以下是经过生产验证的完整配置方案：

nginx复制server {
    listen 80;
    server_name localhost;
    
    location /api/ {
        # 处理OPTIONS预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, User-Agent, DNT, Cache-Control, X-Mx-ReqToken, X-Requested-With' always;
            add_header 'Access-Control-Max-Age' 1728000 always;
            add_header 'Content-Type' 'text/plain; charset=utf-8' always;
            add_header 'Content-Length' 0 always;