N
Nuxt•2mo ago
slava

Fetch handler error: fetch failed

After upgrading Nuxt from 3.18.0 to 3.19.3, the site won't load and shows the error in the screenshot. This error shows in the console: 
ERROR  Fetch handler error: fetch failed
   at node:internal/deps/undici/undici:13510:13
   at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
   at async Server.<anonymous> (/Users/slavanossar/Repositories/madetogether/made-together-evolution/node_modules/.pnpm/@nuxt+cli@3.29.3_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/dev.mjs:232:27)
nuxt:dev:
 [cause]: invalid connection header
nuxt:dev:
     at processHeader (node:internal/deps/undici/undici:2168:17)
     at new Request (node:internal/deps/undici/undici:1998:15)
     at [dispatch] (node:internal/deps/undici/undici:7802:25)
     at Client.Intercept (node:internal/deps/undici/undici:7535:20)
     at Client.dispatch (node:internal/deps/undici/undici:588:44)
     at [dispatch] (node:internal/deps/undici/undici:819:32)
     at Pool.dispatch (node:internal/deps/undici/undici:588:44)
     at [dispatch] (node:internal/deps/undici/undici:8230:27)
     at Agent.Intercept (node:internal/deps/undici/undici:7535:20)
     at Agent.dispatch (node:internal/deps/undici/undici:588:44)
ERROR  Fetch handler error: fetch failed
   at node:internal/deps/undici/undici:13510:13
   at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
   at async Server.<anonymous> (/Users/slavanossar/Repositories/madetogether/made-together-evolution/node_modules/.pnpm/@nuxt+cli@3.29.3_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/dev.mjs:232:27)
nuxt:dev:
 [cause]: invalid connection header
nuxt:dev:
     at processHeader (node:internal/deps/undici/undici:2168:17)
     at new Request (node:internal/deps/undici/undici:1998:15)
     at [dispatch] (node:internal/deps/undici/undici:7802:25)
     at Client.Intercept (node:internal/deps/undici/undici:7535:20)
     at Client.dispatch (node:internal/deps/undici/undici:588:44)
     at [dispatch] (node:internal/deps/undici/undici:819:32)
     at Pool.dispatch (node:internal/deps/undici/undici:588:44)
     at [dispatch] (node:internal/deps/undici/undici:8230:27)
     at Agent.Intercept (node:internal/deps/undici/undici:7535:20)
     at Agent.dispatch (node:internal/deps/undici/undici:588:44)
Note that I am running Nuxt behind a reverse proxy for local development, and loading localhost:3000 works correctly. I can't see anything in the release changelog that would indicate what the issue is. My Vite server config looks like this 
server: {
      origin: NEXT_PUBLIC_SITE_URL,
      hmr: {
        protocol: 'wss',
        host: 'mycustomdomain.test',
        clientPort: 443,
      },
    },
server: {
      origin: NEXT_PUBLIC_SITE_URL,
      hmr: {
        protocol: 'wss',
        host: 'mycustomdomain.test',
        clientPort: 443,
      },
    },
I tried disabling HMR with hmr: false, as well as removing the config entirely to see if it would fix it, but the issue persists
No description
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @slava. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you’re seeing—Fetch handler error: fetch failed with a cause of invalid connection header—is related to changes in how Node.js (and specifically the undici HTTP client used internally) handles connection headers, especially after Node 19+. This is not directly documented in the Nuxt changelog, but there are several related reports and discussions in the Nuxt community. Key findings from the knowledge sources: - There is a known issue when running Nuxt (especially in dev mode) behind a reverse proxy or with custom server configurations, where the connection header can cause problems with newer Node.js versions and the undici client. Node.js 19+ introduced stricter handling of the connection header, and if a proxy or client sets it to an unexpected value (like close), undici will throw an invalid connection header error. This is discussed in detail in a Stack Overflow thread, where the solution was to ensure the connection header is set to 'keep-alive' instead of 'close' when proxying requests. Overwriting the header to 'keep-alive' resolved the issue for users experiencing similar errors after upgrading Node or Nuxt versions Nuxt SSR DEV mode: proxyRequest does not work with node 19+ (works with 18). - The error is not unique to your setup; others have reported that after upgrading Nuxt (and/or Node), their dev server would hang or requests would remain pending, often due to environment variable handling or changes in the underlying HTTP stack. Some users found that rolling back to earlier versions of Nuxt CLI or adjusting environment variable usage could temporarily resolve the issue, but the root cause in your case appears to be the HTTP connection header defineNuxtConfig is not defined on nuxt 4.1.3. What you can try: 1. Check your reverse proxy configuration to ensure it does not set the connection: close header on proxied requests to Nuxt. If possible, explicitly set or override the connection header to 'keep-alive' for requests forwarded to your Nuxt dev server. 2. If you are using custom server middleware or proxy logic in Nuxt, make sure you are not forwarding the connection header from the client to the server. You may need to filter out or overwrite this header in your proxy logic. 3. If you are using Axios or another HTTP client in your middleware, ensure it does not set connection: close by default. 4. If you are using Node.js 19+, be aware that this version enforces stricter HTTP header validation, which is likely the root cause of the error after your upgrade. Summary:
The error is caused by an invalid or unexpected connection header being sent to the Nuxt dev server, which is now strictly validated by undici in Node.js 19+. Overwriting the header to 'keep-alive' or ensuring it is not set to 'close' should resolve the issue. This is a known problem when using proxies or custom server configurations with recent Node.js and Nuxt versions Nuxt SSR DEV mode: proxyRequest does not work with node 19+ (works with 18). If you need more specific guidance on how to adjust your proxy or middleware, please provide details about your reverse proxy setup or any custom server code. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@492539613034971146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
slava
slavaOP•2mo ago
The solution was conditionally setting the Connection header in the location block for Nuxt in the reverse proxy's virutal host config 
location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;

    set $connection_upgrade '';

    if ($http_upgrade = "websocket") {
      set $connection_upgrade "upgrade";
    }

    if ($connection_upgrade = '') {
      set $connection_upgrade "keep-alive";
    }
    
    proxy_set_header Connection $connection_upgrade;
    proxy_set_header Upgrade $http_upgrade;
    
    proxy_cache_bypass $http_upgrade;
  }
location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;

    set $connection_upgrade '';

    if ($http_upgrade = "websocket") {
      set $connection_upgrade "upgrade";
    }

    if ($connection_upgrade = '') {
      set $connection_upgrade "keep-alive";
    }
    
    proxy_set_header Connection $connection_upgrade;
    proxy_set_header Upgrade $http_upgrade;
    
    proxy_cache_bypass $http_upgrade;
  }

Did you find this page helpful?