Nuxt“/_loading/sse”导致“ERR_INCOMPLETE_CHUNKED_ENCODING 200（正常）”

Question

问题

为了克服

Nuxt 2.14

项目开发过程中的CORS和TLS/SSL问题，使用了Docker Nginx和Node容器，其中Nginx也用作

reverse-proxy

。

DevTools 控制台当前指示这些常规请求失败：

GET https://test.testpay.local:444/_loading/sse net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) :444/_loading/sse:1

Nginx 代理容器日志表明存在以下问题：

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" "-"

环境

Nginx 配置如下：

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;
  }
}

问题

可能是什么？这是预期的吗？或者您将如何调试更深入的连接/原因？

Answer 1

经过一番调查，这似乎是代理和 Nuxt SSE 之间的配置错误（即加载 Nuxt.js 的屏幕模块）。

从模块接收到的

Content-Type: text/event-stream

标头需要连续连接才能使服务器发送事件或SSE工作，并且代理过早终止连接，而Nuxt端没有发送任何消息。

将默认的

60s

（截至 2024 年 5 月）Nginx 设置 代理读取超时 增加到更长的时间，如

3600s

解决了这个问题。在这种情况下，我们希望模块发送该限制内的任何内容。

换句话说，应该在上面的 Nginx 反向代理配置中进行以下更改：

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;
}

瞧瞧！

---

不过，值得一提的是：

1. Nginx 设置

   proxy_buffering off;

   可能也是必需的，因为在这个 answer 中推荐了它，但如果没有设置，我没有任何问题。

Chrome 浏览器将在两分钟不活动后终止不活动的流。如果 如果您想让它保持活动状态，您需要添加一些代码以至少每两分钟一次从服务器向浏览器发送一些内容。

来源

相关

1. 为什么我会收到许多 SSE 请求，导致我的 NUXT.js 项目中的网页速度变慢？...
2. 使用事件流时获取 net::ERR_INCOMPLETE_CHUNKED_ENCODING 200...
3. Chrome 网::ERR_INCOMPLETE_CHUNKED_ENCODING 错误...