nitro: Proxy breaks images

Environment

nuxt 3 with nitro 2.4.0, node v18.14.2

Reproduction

https://stackblitz.com/edit/github-xzp2dt?file=nuxt.config.ts,app.vue

(stackblitz doesn’t allow external requests probably, but you get the idea, it still doesn’t work locally)

Describe the bug

When data is json, it works fine but when data is image, it still return {} as image

Additional context

example config (used in reproduction):

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  routeRules: {
    '/nuxt/**': {
      proxy: {
        to: 'https://nuxt.com/**',
      },
    },
  },
});

Logs

the original problem (not reproduction) fails silently, so there’s no log, log below is from stackblitz not being able to proxy requests

[3:16:32 PM] [nuxt] [request error] [unhandled] [500] request to https://nuxt.com/socials/composables.jpg failed, reason: socket hang up (https://nuxt.com/socials/composables.jpg)
  at async $fetchRaw2 (file://./node_modules/ofetch/dist/shared/ofetch.502a4799.mjs:197:24)  
  at async sendProxy (file://./node_modules/h3/dist/index.mjs:607:20)  
  at async Object.eval [as handler] (file://./node_modules/h3/dist/index.mjs:1348:19)  
  at async Server.toNodeHandle (file://./node_modules/h3/dist/index.mjs:1423:7)

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 26 (5 by maintainers)

Most upvoted comments

@pi0 when using

  "resolutions": {
       "nitropack": "npm:nitropack-edge@latest"
  }

in package.json, the server throws 500, Cannot read properties of undefined (reading 'pathname'):

500
Cannot read properties of undefined (reading 'pathname')

at getRouteRules ([removed]/.nuxt/dev/index.mjs:630:29)
at Object.handler ([removed]/.nuxt/dev/index.mjs:595:24)
at Object.handler ([removed]/node_modules/h3/dist/index.mjs:1284:31)
at toNodeHandle ([removed]/node_modules/h3/dist/index.mjs:1359:17)
at callHandle ([removed]/node_modules/unenv/runtime/fetch/call.mjs:24:12)
at ufetch ([removed]/node_modules/unenv/runtime/fetch/index.mjs:9:23)
at Object.localFetch ([removed]/.nuxt/dev/index.mjs:1012:12)
at errorhandler ([removed]/.nuxt/dev/index.mjs:704:50)
at Object.onError ([removed]/.nuxt/dev/index.mjs:1002:14)
at Server.toNodeHandle ([removed]/node_modules/h3/dist/index.mjs:1366:27)

same thing when I changed nuxt version in my dev deps to nuxt edge

Are you using npm ? resolutions is only supported by yarn and pnpm. For npm it’s overrides.

Hebilicious on Aug 2, 2023

Please consider trying with nitro edge or nuxt edge (it already includes h3 rc. you do not need nightly anymore). And please ping me to reopen if still having issues on edge 🙏🏼

pi0 on Aug 1, 2023

Okay I found out the 304 response is causing the 1 succeed 1 fail with the above modification (because _data becomes empty for 304 responses, obviously, lol)

so changing the modification to the following fixes the problem:

if (response._data !== void 0) {
    if (response._data && response._data.arrayBuffer) {
      await response._data.arrayBuffer().then(b => {
        const buffer = Buffer.from(b);
        event.node.res.write(buffer);
      });
    }
    return event.node.res.end();
  }

jd1378 on May 15, 2023