Docker容器部署VueJS应用配置Nginx反向代理后Cookie请求头过大问题

一、调整Nginx请求头缓冲区阈值 #

Cookie请求头过大报错的直接触发原因，是请求携带的Cookie总大小超过了Nginx默认的请求头缓冲区限制：

• Nginx默认client_header_buffer_size为1k，仅能容纳体积较小的请求头
• 默认large_client_header_buffers配置为4个、每个8k，当单个请求头（包含Cookie）超过单块缓冲区大小时就会抛出400报错

可在Nginx的http块、server块层级添加如下配置，扩大缓冲区容量：

client_header_buffer_size 2k;
large_client_header_buffers 4 16k;

如果Nginx运行在Docker容器中，修改配置后需执行reload操作或重启容器确保配置生效，不要直接沿用容器镜像内的默认配置。

二、修正现有CORS配置的逻辑漏洞 #

现有Nginx配置存在多处CORS规则问题，会直接导致Cookie重复写入、体积快速累积膨胀：

• 原配置中Access-Control-Allow-Origin设置为通配符*，该规则与跨域携带Cookie的浏览器安全规则冲突：当请求需要携带Cookie时，浏览器不允许响应返回通配符源，会导致后端鉴权逻辑反复触发Cookie写入，多次重写后Cookie体积会快速超标
  • 需将通配符替换为前端实际访问的域名，同时补充跨域携带Cookie必需的响应头：

    add_header 'Access-Control-Allow-Origin' '你的前端实际访问域名';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Expose-Headers' 'Set-Cookie';
    

• 原配置的/api反向代理块未配置对应CORS规则，会导致浏览器跨域预检请求（OPTIONS）无法获得正确的跨域授权，反复触发预检、重复写入Cookie
  • 需给/api的location块补全统一的CORS规则，同时单独处理OPTIONS预检请求，避免无意义的请求转发：

    location /api {
        # 统一跨域响应头
        add_header 'Access-Control-Allow-Origin' '你的前端实际访问域名';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin, Authorization';
        add_header 'Access-Control-Expose-Headers' 'Set-Cookie';
    
        # 直接返回204处理OPTIONS预检请求
        if ($request_method = OPTIONS ) {
            return 204;
        }
    
        proxy_pass http://[back-end-api]/public/index.php/api ;
    }
    

三、清理域名下的冗余Cookie #

Cookie体积过大往往并非单次写入导致，而是长期运行下域名下累积了大量历史遗留、无效的Cookie值：

• 打开浏览器开发者工具的Application面板，在对应域名的Cookie列表中，清理已过期、和当前应用无关、重复同名的无效Cookie
• 检查后端Cookie写入逻辑，给每个业务Cookie设置明确的作用路径、过期时间，不要默认将Cookie作用域设为全域名，避免不同路径的请求重复写入同名Cookie

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