nginx header limitation

[dnkmdg]

Opening this issue to aid others running into a somewhat bizarre issue, might also be cause for some documentation.

When applying the @inertia directive the yielded result contains both the page template and links for all dynamically fetched modules and styles. Recently we started seeing 502 Bad Gatewayerrors when navigating directly to certain routes in our app, but not when arriving at the same routes from programmatic navigation ie. SPA navigation. After some debugging we found that all of the rendered <script> tags caused response header section links to blow up, thereby causing nginx to fail with a 502.

The solution for this is to increase nginx buffers:

proxy_buffer_size   4096k;
proxy_buffers   128 4096k;
proxy_busy_buffers_size   4096k;

A single response could easily look like this, where the "link" section alone is too much for the standard configuration of nginx to handle.

server	nginx
content-type	text/html; charset=UTF-8
vary	Accept-Encoding
cache-control	no-cache, private
date	Wed, 21 Jun 2023 13:39:41 GMT
link	<https://my-production-inertia-app.io/build/assets/app-70b4ce10.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/CoolCard-15f160be.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/AuthenticatedLayout-55f1c4db.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/FileUpload-aad0cdad.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/ImageGallery-6f214b75.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/CoolSelect-8cfc798d.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/Show-f86228ba.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/app-af524a63.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/Show-d2c761ab.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/GlobalSearchModal-038356f7.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/TextInput-7c60560f.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/UiStore-1d771fae.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/Toast-46e71053.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/BaseButton-9b394d38.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/PrimaryButton-2cf62d91.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/UnderlinedLink-6a468b5c.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/AnonDialog-e37a92bf.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/OutlineButton-76aafa00.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ImageControls-ccbc8a04.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/CoolCard-30520ede.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/InputError-74da528d.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/index-41b1ba78.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ShippingItem-ce415210.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/vue-drawing-canvas.esm-f7af890c.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/file-2ba84ccc.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/date-cdab97b8.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/WhiteButton-30bc2cb4.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/PickingLayout-29a854e6.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/use-tracked-pointer-b8f4a78b.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/use-resolve-button-type-3ac7b00a.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/use-controllable-e9af45ec.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/mitt-3a6e1e85.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/_plugin-vue_export-helper-c27b6911.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/FileUpload-5dd25a12.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ImageGallery-645e2648.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/DangerButton-84d21b86.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/CoolSelect-b9092254.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ApplicationLogo-6e0281ba.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ToastArea-73aadd4a.js>; rel="modulepreload"
vary	X-Inertia

[trippo]

I have the same problem... a route gives me a 502 Bad Gateway error...
If I remove a component and put its code directly inside the page content all work fine...

But this configuration don't solve the problem...

proxy_buffer_size   4096k;
proxy_buffers   128 4096k;
proxy_busy_buffers_size   4096k;

If I use the same component on other pages works fine!

How can I solve this problem?

[trippo]

I solve with

	fastcgi_buffers 128 4k;
	fastcgi_buffer_size 12k;
	fastcgi_busy_buffers_size 16k;

[jessarcher]

Thanks for sharing your insights! Going to close this one but feel free to continue the discussion 🙂

[FerVillanuevas]

The proxy solution works fine for me with Octane

proxy_buffer_size 4096k;
proxy_buffers 128 4096k;
proxy_busy_buffers_size 4096k;

thanks @trippo

[rstefanic]

This was a life safer. Thank you @dnkmdg. I have been banging my head against a wall trying to fix it for a couple of days now. In my case, we weren't getting a 502 error. The response was a blank page with no content and a 200 status response. The HTTP message body was 0 bytes every time.

It wasn't until I added an extra header that I got the 502 error and then stumbled upon this post. I checked the header size that page was returning, and the header was 4.6kb! Our machine running the Inertia application had the default fastcgi_buffer_size of 4k (which is the NGINX default taken the host machine's page size). Bumping it up to 8k is what did the trick for us and everything's working smoothly!

fastcgi_buffer_size 8k;

[GDanielRG]

This was a life safer. Thank you @dnkmdg. I have been banging my head against a wall trying to fix it for a couple of days now. In my case, we weren't getting a 502 error. The response was a blank page with no content and a 200 status response. The HTTP message body was 0 bytes every time.

It wasn't until I added an extra header that I got the 502 error and then stumbled upon this post. I checked the header size that page was returning, and the header was 4.6kb! Our machine running the Inertia application had the default fastcgi_buffer_size of 4k (which is the NGINX default taken the host machine's page size). Bumping it up to 8k is what did the trick for us and everything's working smoothly!

fastcgi_buffer_size 8k;

Was having random Nginx errors, the fastest way I found how to replicate it was going to a specific page and just reloading and i would get the nginx error. So its different if inertia loads the page initially with html or just sends the json on subsequent requests. Either way this fixed it and you are a savior for me and 2 of my customers. Thanks!

[aigletter]

It was helpful for me.
I needed both options. I used Nginx Proxy Manager and it was solved with fastcgi_* directives for nginx of my application and proxy_* directives for Nginx Proxy Manager.
Thank you all very much!

[alamgir-napollo]

proxy_buffer_size 4096k;
proxy_buffers 128 4096k;
proxy_busy_buffers_size 4096k;
Everyone talking to add these line but where to add this line as i am using plesk where i deployed laravel with inertia and react js?

[Barbapapazes]

proxy_buffer_size 4096k; proxy_buffers 128 4096k; proxy_busy_buffers_size 4096k; Everyone talking to add these line but where to add this line as i am using plesk where i deployed laravel with inertia and react js?

In your nginx config:

server {
    location ~ \.php$ {
        fastcgi_buffer_size 8k;
    }
}