NGINX配置Socket.io跨域头重复问题解决方案咨询

我来帮你搞定这个跨域头重复的坑！问题根源其实在于Nginx的add_header特性和Socket.io的自动跨域处理叠加了——你在OPTIONS请求的if块里加的跨域头，会被Nginx附加到所有后续响应（包括Socket.io的请求），而Socket.io本身也会自动返回Access-Control-Allow-Origin这类头，两边一叠加就出现重复了。

下面给你两种针对性的解决方案，按需选择：

方案1：精准拦截OPTIONS请求，避免转发给Socket.io #

直接在Nginx里处理OPTIONS请求，返回204状态码（不需要响应体），这样就不会让请求到达Socket.io后端，自然不会出现头重复。修改你的配置如下：

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name devapi.doctoroneworld.com;

    location / {
        # 专门处理OPTIONS预检请求
        if ($request_method = 'OPTIONS') {
            # 添加完整的跨域头，用always确保错误响应也能带上
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;
            # 直接返回204，终止请求处理，避免转发到后端
            return 204;
        }

        # Socket.io代理配置，这里不要再加跨域头
        proxy_pass http://你的Socket.io后端地址;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

方案2：拆分Socket.io和其他API的请求处理 #

如果你的域名下同时有Socket.io和普通API接口，可以把两者的location分开，只给普通API加Nginx跨域头，Socket.io交给自身处理：

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name devapi.doctoroneworld.com;

    # 单独处理Socket.io请求，不添加Nginx跨域头
    location /socket.io/ {
        proxy_pass http://你的Socket.io后端地址/socket.io/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

    # 处理其他普通API请求，添加跨域头
    location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
            return 204;
        }

        # 给非OPTIONS请求也添加跨域头（如果需要的话）
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        proxy_pass http://你的普通API后端地址;
        # 其他API代理配置...
    }
}

验证方法 #

修改配置后重启Nginx，用curl测试：

1. 测试OPTIONS请求：

curl -I -X OPTIONS http://devapi.doctoroneworld.com/

2. 测试Socket.io握手请求：

curl -I http://devapi.doctoroneworld.com/socket.io/?EIO=4&transport=polling

查看响应头，只要Access-Control-Allow-Origin只出现一次，就说明问题解决了。

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