invalid connection header when using nginx proxy

[ahoiroman]

Environment

• Operating System: Darwin
• Node Version: v22.20.0
• Nuxt Version: 4.1.3
• CLI Version: 3.29.1
• Nitro Version: 2.12.6
• Package Manager: pnpm@10.17.1
• Builder: -
• User Config: modules, devtools, css, content, mdc, compatibilityDate, nitro, vite, eslint, i18n
• Runtime Modules: @nuxt/eslint@1.9.0, @nuxt/image@1.11.0, @nuxt/ui@4.0.1, @nuxtjs/i18n@10.1.0, @nuxt/content@3.7.1
• Build Modules: -

Reproduction

Describe the bug

When I use a proxy (NGINX) to connect to my Nuxt project via https://web.example.test, I am getting "An error has occurred" . Changing https:// to http:// does not resolve the problem.

Calling http://localhost:3000 works fine.

Additional context

Exception

[ode_modules/.pnpm/youch-core@0.3.3/node_modules/youch-core/build/index.js](vscode://file//Users/ahoi/Entwicklung/Nuxt/example-frontend/node_modules/.pnpm/youch-core@0.3.3/node_modules/youch-core/build/index.js:128)
in #normalizeError
at line 128:19

      return source;
    }
    if (typeof source === "object" && source && "message" in source && "stack" in source) {
      return source;
    }
    const error = new Exception(JSON.stringify(source));
    error.help = 'To get as much information as possible from your errors, make sure to throw Error objects. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error</a> for more information.';
    return error;
  }

where const error = new Exception(JSON.stringify(source)); is highlighted.

Request

host	web.example.test
x-real-ip	127.0.0.1
x-forwarded-for	127.0.0.1
x-forwarded-proto	https
x-client-verify	SUCCESS
x-nginx-proxy	true
connection	upgrade
sec-fetch-dest	document
user-agent	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0.1 Safari/605.1.15
accept	text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
sec-fetch-site	none
sec-fetch-mode	navigate
accept-language	de-DE,de;q=0.9
priority	u=0, i
accept-encoding	gzip, deflate, br

Logs

[6:10:02 PM]  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> (node_modules/.pnpm/@nuxt+cli@3.29.1_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/dev.mjs:115:27)

  [cause]: invalid connection header

      at processHeader (node_modules/.pnpm/undici@7.16.0/node_modules/undici/lib/core/request.js:399:13)                              
      at new Request (node_modules/.pnpm/undici@7.16.0/node_modules/undici/lib/core/request.js:187:11)                                
      at [dispatch] (node_modules/.pnpm/undici@7.16.0/node_modules/undici/lib/dispatcher/client.js:299:21)                            
      at Client.dispatch (node_modules/.pnpm/undici@7.16.0/node_modules/undici/lib/dispatcher/dispatcher-base.js:153:29)              
      at [dispatch] (node_modules/.pnpm/undici@7.16.0/node_modules/undici/lib/dispatcher/pool-base.js:157:28)                         
      at Pool.dispatch (node_modules/.pnpm/undici@7.16.0/node_modules/undici/lib/dispatcher/dispatcher-base.js:153:29)                
      at [dispatch] (node_modules/.pnpm/undici@7.16.0/node_modules/undici/lib/dispatcher/agent.js:122:23)                             
      at Agent.dispatch (node_modules/.pnpm/undici@7.16.0/node_modules/undici/lib/dispatcher/dispatcher-base.js:153:29)               
      at node:internal/deps/undici/undici:11144:55
      at new Promise (<anonymous>)
      at dispatch (node:internal/deps/undici/undici:11144:16)
      at httpNetworkFetch (node:internal/deps/undici/undici:11041:73)                                                                 
      at httpNetworkOrCacheFetch (node:internal/deps/undici/undici:10927:39)                                                          
      at httpFetch (node:internal/deps/undici/undici:10760:43)
      at schemeFetch (node:internal/deps/undici/undici:10677:18)
      at node:internal/deps/undici/undici:10522:26
      at mainFetch (node:internal/deps/undici/undici:10541:11)
      at fetching (node:internal/deps/undici/undici:10489:7)
      at fetch (node:internal/deps/undici/undici:10358:20)
      at fetch (node:internal/deps/undici/undici:13508:10)
      at fetch (node:internal/bootstrap/web/exposed-window-or-worker:75:12)                                                           
      at fetchAddress (node_modules/.pnpm/@nuxt+cli@3.29.1_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/dev.mjs:75:12)           
      at Server.<anonymous> (node_modules/.pnpm/@nuxt+cli@3.29.1_magicast@0.3.5/node_modules/@nuxt/cli/dist/chunks/dev.mjs:115:33)    
      at Server.emit (node:events:530:35)
      at parserOnIncoming (node:_http_server:1153:12)
      at HTTPParser.parserOnHeadersComplete (node:_http_common:117:17)

[github-actions]

Would you be able to provide a minimal reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

Please use a template below to create a minimal reproduction

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[ahoiroman]

Difficult to create a reproduction with a NGINX proxy setup.

But I managed to dump the request:

Failing requests

 Request { method: 'GET',
  url: 'https://web.example.test/',
  headers:
   { host: 'web.example.test',
     'x-real-ip': '127.0.0.1',
     'x-forwarded-for': '127.0.0.1',
     'x-forwarded-proto': 'https',
     'x-client-verify': 'SUCCESS',
     'x-nginx-proxy': 'true',
     connection: 'upgrade',
     'sec-fetch-dest': 'document',
     'user-agent':
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0.1 Safari/605.1.15',
     accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
     'sec-fetch-site': 'none',
     'sec-fetch-mode': 'navigate',
     'accept-language': 'de-DE,de;q=0.9',
     priority: 'u=0, i',
     'accept-encoding': 'gzip, deflate, br' },
  destination: '',
  referrer: 'about:client',
  referrerPolicy: '',
  mode: 'cors',
  credentials: 'same-origin',
  cache: 'default',
  redirect: 'follow',
  integrity: '',
  keepalive: false,
  isReloadNavigation: false,
  isHistoryNavigation: false,
  signal: AbortSignal { aborted: false } }

[6:24:56 PM]  ERROR  Fetch handler error: fetch failed

Working request (localhost:3000)

Request { method: 'GET',
  url:
   'http://localhost:3000/_nuxt/@id/virtual:nuxt:%2FUsers%2Fahoi%2FEntwicklung%2FNuxt%2Fexample-frontend%2F.nuxt%2Fui%2Fprose%2Fp.ts',
  headers:
   { host: 'localhost:3000',
     'sec-fetch-site': 'same-origin',
     accept: '*/*',
     origin: 'http://localhost:3000',
     'if-none-match': 'W/"3b-MwexDlUDJWLSvJWIjqBpWhBO+to"',
     'sec-fetch-mode': 'cors',
     'user-agent':
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0.1 Safari/605.1.15',
     referer: 'http://localhost:3000/',
     'sec-fetch-dest': 'script',
     'accept-language': 'de-DE,de;q=0.9',
     priority: 'u=1, i',
     'accept-encoding': 'gzip, deflate',
     cookie: 'i18n_redirected=en',
     connection: 'keep-alive' },
  destination: '',
  referrer: 'about:client',
  referrerPolicy: '',
  mode: 'cors',
  credentials: 'same-origin',
  cache: 'default',
  redirect: 'follow',
  integrity: '',
  keepalive: false,
  isReloadNavigation: false,
  isHistoryNavigation: false,
  signal: AbortSignal { aborted: false } }

[ahoiroman]

Somehow "fixed" by overriding Nuxt/cli:

  "pnpm": {
    "overrides": {
      "@nuxt/cli": "3.28.0"
    }
  }

[MortenROSE]

Somehow "fixed" by overriding Nuxt/cli:

  "pnpm": {
    "overrides": {
      "@nuxt/cli": "3.28.0"
    }
  }

Upgraded from nuxt 3.19.2 to 3.19.3 and encountered the exact same issue. our nuxt app runs inside a docker container and gets proxy_pass'ed with nginx. Also fixed by setting that override

[ahoiroman]

Well, something is wrong at the moment. This workaround fixes the initial issue, but for other tooling, e.g. proxy features, the issue remains in my case.

[MortenROSE]

FWIW here is my nginx proxy config

server {
    server_name frontend.rose.de;

    keepalive_requests 10000;

	resolver 127.0.0.11 ipv6=off valid=1s;
	resolver_timeout 5s;

    set $target_host "evon-de-eur:3000";

    location ^~ /_nuxt {
        proxy_pass http://$target_host;

        proxy_set_header Host $http_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_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
    }
}

and this is the nuxt.config (partially) - i let the ws config there since i believe that nuxt cli update may have caused that issue. https://github.com/nuxt/cli/pull/1051/files

export default defineNuxtConfig({
  devtools: {
    enabled: true,

    timeline: {
      enabled: true,
    },
  },    

  devServer: {
    host: '0.0.0.0',
  },

  experimental: {
    writeEarlyHints: false,
  },

  compatibilityDate: '2024-09-04',

  vite: {
    plugins: [
      svgLoader(),
    ],
    optimizeDeps: {
      exclude: ['fsevents'],
    },
    server: {
      hmr: {
        host: envs.BASE_URL,
        protocol: 'wss',
        clientPort: 443,
      },
      watch: {
        usePolling: true,
        interval: 300,
        ignored: ['**/tests/playwright/**', '**/playwright-report**'],
      },
    },
  },
});

[stephen-tribefibre]

a "chat" bot gave me this and it worked.

server {
listen 443 ssl http2;
server_name web.site;

ssl_certificate /etc/letsencrypt/live/web.site/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/web.site/privkey.pem;

location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;

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;

# explicitly strip Connection for non-WS
proxy_set_header Connection "";
proxy_read_timeout 300s;

}

location ^~ /_nuxt/ {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}