Nginx配置CORS跨域资源共享实战指南

1. 理解CORS机制与Nginx的角色

跨域资源共享（CORS）是现代Web开发中无法回避的核心问题。当你的前端应用尝试从不同域名、端口或协议的后端获取资源时，浏览器会像严格的安检员一样拦截这些请求——这就是著名的"同源策略"在起作用。而Nginx作为反向代理的瑞士军刀，正是解决这个问题的绝佳工具。

为什么需要特别关注预检请求（Preflight）？当你的AJAX请求满足以下任一条件时：

• 使用了PUT/DELETE等非简单方法
• 携带了自定义头部（如X-Requested-With）
• Content-Type不是application/x-www-form-urlencoded、multipart/form-data或text/plain

浏览器会先发送OPTIONS请求探路。我曾见过团队花费两天排查的"神秘404"，最终发现是Nginx未正确处理OPTIONS请求。这引出了我们的核心命题：Nginx必须同时处理好预检请求和实际请求两条路径。

2. Nginx基础CORS配置解剖

下面这个配置模板是我在多个生产环境验证过的可靠方案。注意add_header指令的微妙之处——它只在当前区块有效，这就是为什么我们需要在OPTIONS和常规请求中重复声明：

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

    location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://yourfrontend.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
            add_header 'Access-Control-Allow-Headers' 
                'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Ty