Issue
In order to overcome CORS and TLS/SSL issues during Nuxt 2.14 project development, a Docker Nginx and Node containers are in use, where Nginx is also used as a reverse-proxy.
DevTools Console is currently indicating these regular request failures:
GET https://test.testpay.local:444/_loading/sse net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) :444/_loading/sse:1
Nginx Proxy Container logs indicated the following issue:
test-dp-webserver | 2024/05/24 12:45:07 [error] 235#235: *309 upstream timed out (110: Connection timed out) while reading upstream, client: 172.22.0.1, server: test.testpay.local, request: "GET /_loading/sse HTTP/1.1", upstream: "http://172.22.0.3:3000/_loading/sse", host: "test.testpay.local:444", referrer: "https://test.testpay.local:444/@5/payment"
test-dp-webserver | 172.22.0.1 - - [24/May/2024:12:45:07 +0000] "GET /_loading/sse HTTP/1.1" 200 0 "https://test.testpay.local:444/@5/payment" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36" "-"
test-dp-webserver | 2024/05/24 12:46:10 [error] 238#238: *319 upstream timed out (110: Connection timed out) while reading upstream, client: 172.22.0.1, server: test.testpay.local, request: "GET /_loading/sse HTTP/1.1", upstream: "http://172.22.0.3:3000/_loading/sse", host: "test.testpay.local:444", referrer: "https://test.testpay.local:444/@5/payment"
test-dp-webserver | 172.22.0.1 - - [24/May/2024:12:46:10 +0000] "GET /_loading/sse HTTP/1.1" 200 0 "https://test.testpay.local:444/@5/payment" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36" "-"
test-dp-webserver | 2024/05/24 12:47:13 [error] 235#235: *349 upstream timed out (110: Connection timed out) while reading upstream, client: 172.22.0.1, server: test.testpay.local, request: "GET /_loading/sse HTTP/1.1", upstream: "http://172.22.0.3:3000/_loading/sse", host: "test.testpay.local:444", referrer: "https://test.testpay.local:444/@5/payment"
test-dp-webserver | 172.22.0.1 - - [24/May/2024:12:47:13 +0000] "GET /_loading/sse HTTP/1.1" 200 0 "https://test.testpay.local:444/@5/payment" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36" "-"
test-dp-webserver | 2024/05/24 12:48:17 [error] 235#235: *351 upstream timed out (110: Connection timed out) while reading upstream, client: 172.22.0.1, server: test.testpay.local, request: "GET /_loading/sse HTTP/1.1", upstream: "http://172.22.0.3:3000/_loading/sse", host: "test.testpay.local:444", referrer: "https://test.testpay.local:444/@5/payment"
test-dp-webserver | 172.22.0.1 - - [24/May/2024:12:48:17 +0000] "GET /_loading/sse HTTP/1.1" 200 0 "https://test.testpay.local:444/@5/payment" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36" "-"
Environment
Nginx configuration is the following:
upstream nuxt {
ip_hash;
server test-node:3000;
}
server {
server_name 'test.testpay.local';
listen 443 ssl;
include '/etc/nginx/mime.types';
# SSL
# --------------------------------
include './conf.d/tls/main.conf';
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
# Proxy
# --------------------------------
proxy_next_upstream error;
# Locations
# ----------------------------------------------------------------
location / {
proxy_set_header Host '$host';
proxy_set_header X-Real-IP '$remote_addr';
proxy_set_header X-Forwarded-For '$proxy_add_x_forwarded_for';
proxy_set_header X-Forwarded-Proto '$scheme';
proxy_pass http://nuxt;
}
}
Question
What might it be? Is it expected or how would you debug the connection/cause deeper?
After some investigation, it appears to be a misconfiguration between proxy and Nuxt SSE (i.e. Loading Screen Module for Nuxt.js).
Content-Type: text/event-stream header received from the module required a continuous connection for Server-Sent Events or SSE to work, and proxy was terminating connection too soon where no message was sent from the Nuxt end.
An increase of the default 60s (as of 2024-05) Nginx setting proxy read timeout to something longer like 3600s solved the issue. In this case, we expect the Nuxt end to send anything within that limit to the client.
In other words, the following changes should be done in the above Nginx reverse-proxy configuration:
location / {
proxy_set_header Host '$host';
proxy_set_header X-Real-IP '$remote_addr';
proxy_set_header X-Forwarded-For '$proxy_add_x_forwarded_for';
proxy_set_header X-Forwarded-Proto '$scheme';
proxy_read_timeout 3600;
proxy_pass http://nuxt;
}
Et voila!
However, it’s worth to mention:
-
Nginx setting
proxy_buffering off;may be required, too, since it was recommended in this answer, yet I had no issues without it set.
The Chrome browser will kill an inactive stream after two minutes of inactivity. If
you want to keep it alive, you need to add some code to send something from the server to the browser at least once every two minutes.Source
Related
- Why do I get many SSE request that slow down my webpage in my NUXT.js project?…
- Getting net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 when consuming event-stream…
- Chrome net::ERR_INCOMPLETE_CHUNKED_ENCODING error…