nginx in rc.12 no more proxy_pass infinity loading

[andysay]

Environment

---

• Operating System: Linux
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: npm@8.15.1
• Builder: vite
• User Config: modules, vue, runtimeConfig, css, buildModules, build
• Runtime Modules: @nuxtjs/tailwindcss@5.3.5
• Build Modules: @pinia/nuxt@0.4.3

---

Reproduction

server
{
    listen 80;
    listen [::]:80;
    server_name site.dev www.site.dev;

    location /
    {
        proxy_pass http://127.0.0.1:3001;
        include /etc/nginx/proxy_params;
    }
}

params

proxy_buffers 16 32k;
        proxy_buffer_size 64k;
        proxy_busy_buffers_size 128k;
        proxy_cache_bypass $http_pragma $http_authorization;
        proxy_connect_timeout 59s;
        proxy_hide_header X-Powered-By;
        proxy_http_version 1.1;
        proxy_ignore_headers Cache-Control Expires;
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504 http_404;
        proxy_no_cache $http_pragma $http_authorization;
        proxy_pass_header Set-Cookie;
        proxy_read_timeout 600;
        proxy_redirect off;
        proxy_send_timeout 600;
        proxy_temp_file_write_size 64k;
        proxy_set_header Accept-Encoding '';
        proxy_set_header Cookie $http_cookie;
        proxy_set_header Host $host;
        proxy_set_header Proxy '';
        proxy_set_header Referer $http_referer;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Original-Request $request_uri;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;

Describe the bug

infinity loading.

Additional context

No response

Logs

No response

[levidavidmurray]

These proxy_params seem to have fixed the infinite loading, but I'm seeing response times of up to 5 seconds in dev environment... (prod build)

This seems to have started with this commit (nuxt/framework@5a2616c) that added support for early hint rendering (status code 103).

Note the header differences between a direct connection to the nitro server versus an nginx proxy_pass

# =========== direct nitro connection =========== 
levi@Levi-PC:~/Code/gh/nuxt-rc-13-app$ curl -s -D - -o /dev/null http://localhost:3000
HTTP/1.1 103 Early Hints
Link: </_nuxt/entry.41705590.js>; rel="modulepreload"; as="script"; crossorigin, </_nuxt/error-component.3ac342b2.js>; rel="prefetch"; as="script"; crossorigin

HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
X-Powered-By: Nuxt
Server-Timing: -;dur=0;desc="Generate"
Date: Wed, 19 Oct 2022 09:21:06 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Content-Length: 702

# =========== nginx proxy_pass =========== 
levi@Levi-PC:~/Code/gh/nuxt-rc-13-app$ curl -s -D - -o /dev/null http://localhost
HTTP/1.1 103 Early Hints
Server: nginx/1.18.0 (Ubuntu)
Date: Wed, 19 Oct 2022 09:20:57 GMT
Connection: keep-alive
Link: </_nuxt/entry.41705590.js>; rel="modulepreload"; as="script"; crossorigin, </_nuxt/error-component.3ac342b2.js>; rel="prefetch"; as="script"; crossorigin

HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
X-Powered-By: Nuxt
Server-Timing: -;dur=0;desc="Generate"
Date: Wed, 19 Oct 2022 09:20:57 GMT
Connection: close

^C

I'm sure there's an ideal proxy_pass config to support this, but I frankly just don't have the patience for it as this feature isn't important to me. I just ended up disabling experimental.writeEarlyHints in nuxt.config.ts:

export default defineNuxtConfig({
  ...
  experimental: {
    writeEarlyHints: false,
  },
  ...
})

[vanling]

I can confirm my simple nginx deployments are also breaking.
The writeEarlyHints @levidavidmurray said above 'fixes' this.

very basic nginx conf

location / {
        proxy_pass http://localhost:3002;
        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;
    }

error in logs

2022/10/19 13:46:14 [error] 751033#751033: *1157 upstream sent too big header while reading response header from upstream, client: 217.123.2.162, server: ********.nl, request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:3002/", host: "********.nl"

[jgupta]

We are unable to make Nginx work with early hints. Either we disable nginx http2 (which would disable early hints anyway) or disable it in nuxt config via writeEarlyHints

We keep getting error ERR_HTTP2_PROTOCOL_ERROR in chrome.

[jgupta]

upstream sent too big header while reading response header from upstream

Since link header would be large, proxy buffers should be increased or disable buffering all together. There is however some other issue too.

[websaxophone]

+1

[kosmeln]

We are experiencing the same issue - our Nginx config with proxy is broken as well. Ended up with disabling the early hints

[westberliner]

Can confirm as well. Disabling it worked.

[egidiusmengelberg]

I was having the same issue when deploying to kubernetes with a nginx-ingress.

Kept getting ERR_HTTP2_PROTOCOL_ERROR as @jgupta described.

Disabling experimental.writeEarlyHints worked!

[lucassimines]

I was having the same issue when deploying to kubernetes with a nginx-ingress.

Kept getting ERR_HTTP2_PROTOCOL_ERROR as @jgupta described.

Disabling experimental.writeEarlyHints worked!

It worked for me too

[misaon]

@danielroe It might be a good point to add recommended settings for Nginx (proxy) to the documentation.

[Suniron]

Omg ! I was stucked all this afternoon with a very long first loading of my app (more than 60s) in production since i've update my dependencies (and many code).

You may save my life 😱.

I hope this fix works, I'll try this Monday 🤞

[misaon]

I think the correct way to solve this is to have Nginx set to accept https traffic :443, then enable http2_push_preload on and everything should work. In our case we also have Nginx set to listen for http :80 (we run behind AWS ALB), the solution for us is to generate a self-signed certificate for the nginx container, which Amazon says is perfectly fine.

[jgupta]

I think the correct way to solve this is to have Nginx set to accept https traffic :443, then enable http2_push_preload on and everything should work. In our case we also have Nginx set to listen for http :80 (we run behind AWS ALB), the solution for us is to generate a self-signed certificate for the nginx container, which Amazon says is perfectly fine.

I am unable to make Nginx (with http2) work with rc12. My config has http2_push_preload on. Were you able to make it work @misaon? If yes, can you please share your Nginx configuration?

[misaon]

I think the correct way to solve this is to have Nginx set to accept https traffic :443, then enable http2_push_preload on and everything should work. In our case we also have Nginx set to listen for http :80 (we run behind AWS ALB), the solution for us is to generate a self-signed certificate for the nginx container, which Amazon says is perfectly fine.

I am unable to make Nginx (with http2) work with rc12. My config has http2_push_preload on. Were you able to make it work @misaon? If yes, can you please share your Nginx configuration?

Do you increase your proxy buffers?

[jgupta]

Do you increase your proxy buffers?

@manniL Yes and I also tried disabling buffering all together. Below is simplofied version of config I am using.

  proxy_buffer_size		 32k;
  proxy_buffers		     256 48k;

server {
    listen      443 ssl http2;
    ssl_certificate cert/xxxx.crt;
    ssl_certificate_key cert/xxxx.key;
    server_name  xxxxxxxxxxxxxxx;

    location / {
        proxy_redirect off;
        proxy_set_header Host  $host;
        proxy_set_header X-Real-IP  $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_ignore_headers Cache-Control;
        proxy_pass http://127.0.0.1:3000$request_uri;
    }
}

[robinscholz]

Thanks for this workaround, took me a few days to debug my app

[misaon]

After the last research, Nginx probably doesn't support 103 early hints at all. It is therefore necessary to disable them in nuxt.config.

[showneykim]

When the service is running as a container in AWS ECS, health checks in the target group do not seem to support 103. I hope it helps if someone encounters the same problem.
Changing the writeEarlyHints value to false can solve the problem.

[vanling]

@pi0 So are we defaulting this experiment to true still? Isn't NGINX sort of industry standard for people who don't use al this fancy providers like Vercel etc?

[manniL]

No, it was turned off by default via nuxt/framework#8486

[vanling]

@manniL ah thanks, thats good. I was looking at https://github.com/misaon/framework/commit/f3b6c8e81d5c26b38fe6d2df9949510014db06ea this one and assumed that meant default true.