Nginx CORS策略失效：前端GET请求跨域拦截问题求助

问题详情 #

前端发起GET请求时触发跨域错误：

从源'http://10.3.0.112:5488'访问'http://10.3.0.112:41052/operations'被CORS策略阻止，原因是预检请求响应缺少'Access-Control-Allow-Origin'请求头。

当前使用的Nginx配置和前端AJAX代码如下：

现有Nginx配置 #

events {}
http {
    upstream tag {
        server tag:41038;
        server tag:42038;
    }

    server {
        listen 41038;
        listen 42038;

        location / {
            proxy_pass http://tag;
        }
    }


    upstream order {
        server order:41052;
        server order:42052;
        server order:43052;
    }

    server {
        listen 41052;
        listen 42052;
        listen 43052;

        location / {
            proxy_pass http://order;
        }
    }
}

前端AJAX请求代码 #

function allCompletedJobOrders() {
     requestStarted()
     if(hasSelectableProps.length > 0) {
        let stationIds = hasSelectableProps.map(item => item.id)
        completedJobOrders = []   
        jobOrders = []
          $.ajax({
            type: "GET",
            url: `http://${getConfig('serverAddress')}:41052/job-orders?stationIds=${stationIds}`,
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'Authorization': auth ? `${auth.token_type} ${auth.access_token}` : null
            },
            success: function (data) {
              if(data.length > 0){
                data.filter(item => item.startTime && item.endTime).forEach(jobOrder => {
                  completedJobOrders.push({
                    id: jobOrder.id,
                    code:jobOrder.code,
                    stationId:jobOrder.stationId,
                    startTime:jobOrder.startTime,
                    endTime: jobOrder.endTime,
                    targetAmount:jobOrder.targetAmount,
                  })
                })
            data.filter(item =>  !item.endTime).forEach(jobOrder => {
                jobOrders.push({
                  id: jobOrder.id,
                  code:jobOrder.code,
                  stationId:jobOrder.stationId,
                  startTime:jobOrder.startTime,
                  endTime: jobOrder.endTime,
                  targetAmount:jobOrder.targetAmount,
                  operationId: jobOrder.operations[0] ? jobOrder.operations[0].operationId : [],
                })
          })
          requestEnded()
            let jobOrderIds = jobOrders.map(item => item.id)
          getRollersByIds(jobOrderIds)
        }
      }
      
      })
  }
}

解决方案 #

1. 修改Nginx配置添加CORS响应头 #

核心是在对应server块中添加CORS规则，处理预检OPTIONS请求和常规请求的跨域头。修改后的order服务server块如下：

server {
    listen 41052;
    listen 42052;
    listen 43052;

    # 处理预检OPTIONS请求
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin 'http://10.3.0.112:5488';
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'Accept, Content-Type, Authorization';
        add_header Access-Control-Max-Age 86400;
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        return 204;
    }

    # 给常规请求添加跨域头
    add_header Access-Control-Allow-Origin 'http://10.3.0.112:5488';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'Accept, Content-Type, Authorization';

    location / {
        proxy_pass http://order;
        # 传递原始请求信息到后端
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

如果需要允许多个前端源，可通过map指令动态匹配：

map $http_origin $cors_origin {
    default "";
    "http://10.3.0.112:5488" $http_origin;
    # 可添加其他允许的源地址
}

# 在server块中替换跨域头配置为：
add_header Access-Control-Allow-Origin $cors_origin;

2. 前端代码微调（可选） #

GET请求中设置Content-Type: application/json会触发浏览器发送预检OPTIONS请求，若后端不需要该头，可移除以减少请求开销：

headers: {
  'Accept': 'application/json',
  // 移除Content-Type配置
  'Authorization': auth ? `${auth.token_type} ${auth.access_token}` : null
}

3. 生效配置 #

修改Nginx配置后，执行命令重启服务：

nginx -s reload

重新发起前端请求即可验证跨域问题是否解决。

内容的提问来源于stack exchange，提问作者fhumanity