Nginx - 400 Request Header Or Cookie Too Large (Angular + Symfony)

Question

I have two projects on the same server:

a Symfony 3 API (api.example.com)
an Angular 5 webapp that uses the API mentionned above (www.example.com)

Both are on the same server, served with one Nginx configuration file each. Both work with HTTPS and are running well on my server: the Angular displays its homepage, and I can see the docs of the API at api.example.com/doc so the problem is when I want to call endpoints of the API from my webapp.

On the Angular app, user can login through a Google OAuth, and the API gives a Bearer Token to the webapp if the user log in successfully.

The problem is after the OAuth authentication, the first request to the API failed with the following error :

400 Bad Request
Request Header Or Cookie Too Large

My JWT token looks like this :

Bearer eyJhbGciOiJSUzI1NiJ9.eyJyb2xlcyI6WyJST0xFX1VTRVIiXSwidXNlcm5hbWUiOiIxMDU1MTc2OTEwNjQzODA2MDQ0NDgiLCJleHAiOjE1MTE1NzkyMDgsImlhdCI6MTUxMDkxMjU0Mn0.EQR-8za7LdvsdGmOrBrJnH5QZrkzObop7B_9_KsSjPAYTHV_3BwQEOgz-AJcbffNvBgGlVphsUgVzU2npp7AclrrZ1EScjjDmx7mKY4vBCRr__fL8WhMVjLEApavaGVTwG-AJBRzDOGA8DVpa9rC_Bd_ixtZtKMaZrJsqm5OjmqexbWd5GM9FJr8uO6bZnS4Xk2WnfNTIFWgkKdqMT0F4zkZMHFXJmV8BRb0JG1-ktx2Y7IK3Npk3MD02pMS2QdIikjPSUbfXaQzqVKhbpH_N-WyEgBjdRCKPMjBlYVm9uhM0rkaPDpZemawaqB0Wm_bWrDPUnlNz4xQ18xkXu-mWvXi0jNTP7ezMqDAZyxCY37S4wrUb-jBz_e_7klEsUfrUTPid63K6wBn00bQPyqyPHybQgurcKFDRPMgT0W2nfnxjssBmz_pBpCL5pJFPlAiAonq8DZxELWQW9oSLNbOxy3kF2macl2tNDY1sl88uftbIzD1hF2Hrh-xqRsgDUei-KdcxetJ_CwdYPlw48lUbeFUmYp1llX5YB3WBkMVMzDCh14fACiN0d0AHqRKiQb6dpAFcidS8NWdQb1B7ytM586r6NIjWcL9SboTemOIMu884IszccUowpd9R-eScmxQCbKKxKtkktIGxKkSz9BuGJU25oW0C1wNbzdkonlOYDQ

I have nothing into the error logs about this issue. I guess it comes from my Nginx configuration but I don't know if it comes from the webapp or the API Nginx config.

Here is my Webapp Nginx config file :

server {
  listen       80;
  server_name www.example.com example.com;
  return 301 https://www.example.com$request_uri;
}
server {
  listen 443 ssl;

  server_name example.com;
  return 301 https://www.example.com$request_uri;

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;
  ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
}

# Change this depending on environment
upstream api {
  server api.example.com:443;
}

server {
  listen 443 ssl;
  server_name  www.example.com;

  root   /home/example/public_html/example-front-prod/dist;

  index index.html;

  location = /index.html {
    internal;
    add_header Cache-Control no-cache;
    error_page 404 = @ng-index;
  }

  location / {
    error_page 404 = @ng-index;
  }

  location @ng-index {
      internal;
      rewrite ^.*$ /index.html last;
  }

  location /assets {
      add_header X-Assets custom-header;
  }

  location ^~ /favicon.ico {
    log_not_found off;
    access_log off;
  }

  location ^~ /robots.txt {
    allow all;
    log_not_found off;
    access_log off;
  }

  location ^~ /.well-known/ {
    log_not_found off;
  }

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;
  ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

  large_client_header_buffers 4 512k;

  # /api will server your proxied API that is running on same machine different port
  # or another machine. So you can protect your API endpoint not get hit by public directly
  location /api {
    proxy_pass https://api;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_ssl_certificate /etc/letsencrypt/live/api.example.com/fullchain.pem;
    proxy_ssl_certificate_key /etc/letsencrypt/live/api.example.com/privkey.pem;
  }

  #Static File Caching. All static files with the following extension will be cached for 1 day
  location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 1d;
  }

  sendfile on;

  ##
  # Gzip Settings
  ##
  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   1100;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  access_log   /var/log/nginx/www.example.access.log;
  error_log   /var/log/nginx/www.example.error.log;
}

And finally here is the Symfony API Nginx config file:

server {
    server_name api.example.com;
    return 301 https://api.example.com$request_uri;
}
server {
    listen 443 ssl;
    server_name api.example.com;
    root /home/example/api/symfony/web;

    location / {
        # try to serve file directly, fallback to app.php
        try_files $uri /app.php$is_args$args;
    }

    # PROD
    location ~ ^/app\.php(/|$) {
        fastcgi_pass unix:/run/php/php7.1-fpm.sock;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        # When you are using symlinks to link the document root to the
        # current version of your application, you should pass the real
        # application path instead of the path to the symlink to PHP
        # FPM.
        # Otherwise, PHP's OPcache may not properly detect changes to
        # your PHP files (see https://github.com/zendtech/ZendOptimizerPlus/issues/126
        # for more information).
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;
        # Prevents URIs that include the front controller. This will 404:
        # http://domain.tld/app.php/some-path
        # Remove the internal directive to allow URIs like this
        internal;
    }

    # return 404 for all other php files not matching the front controller
    # this prevents access to other php files you don't want to be accessible.
    location ~ \.php$ {
        return 404;
    }

    location ^~ /.well-known/ {
        log_not_found off;
    }

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    location ~ ^/(app|app_dev)\.php(/|$) {
      fastcgi_pass   unix:/run/php/php7.1-fpm.sock;
      fastcgi_split_path_info ^(.+\.php)(/.*)$;
      include fastcgi_params;
      fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
      fastcgi_param  HTTPS              true;
    }

    client_body_buffer_size     32k;
    client_header_buffer_size   8k;
    large_client_header_buffers 8 64k;

    ssl_certificate /etc/letsencrypt/live/api.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/api.example.com/privkey.pem;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

    error_log /var/log/nginx/example-api.error.log;
    access_log /var/log/nginx/example-api.access.log;
}

I was hoping large_client_header_buffers will help me to solve my issue but it doesn't change anything.

How can I solve this error?

Nginx - 400 Request Header Or Cookie Too Large (Angular + Symfony)

0 Answers0