nuxt: [request error] [unhandled] [500] fetch failed

Environment

  • Operating System: Darwin
  • Node Version: v20.5.0
  • Nuxt Version: 3.6.5
  • Nitro Version: 2.5.2
  • Package Manager: npm@9.8.0
  • Builder: vite
  • User Config: devtools, modules, routeRules, colorMode, runtimeConfig, app, imports, i18n, content, image, veeValidate, ui, googleFonts
  • Runtime Modules: @nuxt/content@2.7.2, @nuxtjs/i18n@8.0.0-beta.13, @nuxthq/ui@2.7.0, @nuxt/image@1.0.0-rc.1, @vee-validate/nuxt@4.11.1, @nuxtjs/google-fonts@3.0.2
  • Build Modules: -

Reproduction

Create a routeRule like this:

export default defineNuxtConfig({
    routeRules: {
        '/api/v1/**': {
            proxy: `${process.env.NUXT_PUBLIC_BACKEND_URL}/api/${process.env.NUXT_PUBLIC_API_VERSION}/**`,
        },
        '/web/**': {
            proxy: `${process.env.NUXT_PUBLIC_BACKEND_URL}/**`,
        },
        '/csrf': {
            proxy: `${process.env.NUXT_PUBLIC_BACKEND_URL}/sanctum/csrf-cookie`,
        },
    },

Now create a POST request against any of those routes

curl 'http://web.app.test/web/auth/login' \
-X 'POST' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Accept-Encoding: gzip, deflate' \
-H 'Accept-Language: de-DE,de;q=0.9' \
-H 'Host: web.app.test' \
-H 'Origin: http://web.app.test' \
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15' \
-H 'Connection: keep-alive' \
-H 'Referer: http://web.app.test/auth/signin' \
-H 'Content-Length: 48' \
-H 'Cookie: XSRF-TOKEN=...%3D; laravel_session=...%3D; i18n_redirected=en-US' \
-H 'x-xsrf-token: ...=' \
--data-binary '{"email":"test@example.org","password":"secret"}'

Describe the bug

The following error appears:

[6:33:00 PM] [nuxt] [request error] [unhandled] [500] fetch failed (http://api.app.test/auth/login)
  at async sendProxy (./node_modules/h3/dist/index.mjs:1017:20)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1683:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1893:7)
[6:34:23 PM] [nuxt] [request error] [unhandled] [500] fetch failed (http://api.app.test/auth/login)
  at async sendProxy (./node_modules/h3/dist/index.mjs:1017:20)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1683:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1893:7)
[6:34:33 PM] [nuxt] [request error] [unhandled] [500] fetch failed (http://api.app.test/auth/login)
  at async sendProxy (./node_modules/h3/dist/index.mjs:1017:20)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1683:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1893:7)
[6:40:43 PM] [nuxt] [request error] [unhandled] [500] fetch failed (http://api.app.test/auth/login)
  at async sendProxy (./node_modules/h3/dist/index.mjs:1017:20)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1683:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1893:7)

The curl post request is NOT being handled by the API endpoint. It does not “arrive” there at all.

Additional context

No response

Logs

No response

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Comments: 16 (3 by maintainers)

Most upvoted comments

Unfortunately I need to reopen this. I’m not getting this error with POST requests any longer, but DELETE requests are not working.

[nuxt] [request error] [unhandled] [500] fetch failed
  at Object.fetch (node:internal/deps/undici/undici:11600:11)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async sendProxy (./node_modules/h3/dist/index.mjs:1034:20)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1630:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)
[nuxt] [request error] [unhandled] [500] fetch failed
  at Object.fetch (node:internal/deps/undici/undici:11600:11)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async sendProxy (./node_modules/h3/dist/index.mjs:1034:20)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1630:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)

Sorry for digging up this problem. I updated nuxt to latest version (3.8.0), running on docker with node version 20.8. My installed packages are: “devDependencies”: { “@nuxt/devtools”: “latest”, “@nuxtseo/module”: “2.0.0-beta.15”, “@vueuse/core”: “^10.5.0”, “@vueuse/nuxt”: “^10.5.0”, “nuxt-simple-sitemap”: “^3.4.0” }, “dependencies”: { “@nuxt/image”: “^1.0.0”, “@nuxt/ui”: “^2.9.0”, “@pinia/nuxt”: “^0.5.1”, “jsdom”: “^22.1.0”, “nuxt”: “^3.8.0”, “pinia”: “^2.1.7”, “vue3-carousel-nuxt”: “^1.1.0” } After running few days, the problem appeared (again). Error detail is:

[nuxt] [request error] [unhandled] [500] fetch failed
  at Object.fetch (node:internal/deps/undici/undici:11372:11)  
  at async sendProxy (./.output/server/chunks/nitro/node-server.mjs:1850:20)  
  at async Object.handler (./.output/server/chunks/nitro/node-server.mjs:2206:19)  
  at async toNodeHandle (./.output/server/chunks/nitro/node-server.mjs:2395:7)  
  at async ufetch (./.output/server/chunks/nitro/node-server.mjs:2761:17)  
  at async $fetchRaw2 (./.output/server/chunks/nitro/node-server.mjs:2633:26)  
  at async $fetch2 (./.output/server/chunks/nitro/node-server.mjs:2675:15)  
  at async setup (./.output/server/chunks/app/server.mjs:4347:126)  
  at async Object.callAsync (./.output/server/chunks/app/server.mjs:87:16)  

My routes settings in nuxt.config.ts is:

 routeRules: {
    '/proxy/**': {
      proxy: `${process.env.API_URL}/**`
    }
  },

I had changed from Node version 18.x before. The error is always appeared after running for few hours. And my website don’t have any POST requests. Only GET. So I’m looking forward to a solution for this.

It’s h3 bug for method delete, to handle this problem I use @radyakaze 's temporary way.

  // temporary fix delete method
  if (event.method === 'DELETE') {
    try {
      return $fetch(url, {
        headers: {
          authorization: `Bearer ${token}`,
        },
        method: 'DELETE',
      })
    }
    catch (e) {
      const error = e as FetchError

      setResponseStatus(event, error.statusCode || 500)
      return error.data
    }
  }

In server middleware, if the request method is delete I use manual fetch to handle it

Unfortunately I need to reopen this. I’m not getting this error with POST requests any longer, but DELETE requests are not working.

[nuxt] [request error] [unhandled] [500] fetch failed
  at Object.fetch (node:internal/deps/undici/undici:11600:11)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async sendProxy (./node_modules/h3/dist/index.mjs:1034:20)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1630:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)
[nuxt] [request error] [unhandled] [500] fetch failed
  at Object.fetch (node:internal/deps/undici/undici:11600:11)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async sendProxy (./node_modules/h3/dist/index.mjs:1034:20)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1630:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)

Me too