Nuxt•4w ago

devProxy with path both for regular requests and websockets

I am building a GraphQL application where the API endpoint is on /query. I want the devProxy to proxy regular requests AND websocket requests to the same endpoint. However, I can't figure out how to do this properly.
The below obviously doesn't work as is, duplicate key and such:

  nitro: {
    // https://nitro.unjs.io/config#devproxy
    devProxy: {
      host: '127.0.0.1',
      '/query': {
        target: 'http://localhost:8080/query',
        changeOrigin: true,
        secure: false,
      },
      '/query': {
        target: 'ws://localhost:8080/query',
        changeOrigin: true,
        secure: false,
        ws: true,
      },
    },
  },

  nitro: {
    // https://nitro.unjs.io/config#devproxy
    devProxy: {
      host: '127.0.0.1',
      '/query': {
        target: 'http://localhost:8080/query',
        changeOrigin: true,
        secure: false,
      },
      '/query': {
        target: 'ws://localhost:8080/query',
        changeOrigin: true,
        secure: false,
        ws: true,
      },
    },
  },

I experimented with creating a separate Nuxt module which handles .on("upgrade") but having the devProxy and some other part of the code handling proxy requests seem to interfere which each other. And no, I don't want to change the server / GraphQL logic. It works all fine when running outside the dev environment. Module based on this. Is there a canonical / supported way to do what I have in mind? This uses 3.15.0 for Nuxt and I guess there's no easy way to reproduce this as it requires a functional back-end. FWIW, this used to work when Nuxt was using node-http-proxy where the signature for ws was proxy.ws(req, socket, head) E.g. the options weren't passed in as the 3rd arg. Thanks!

3 Replies

kapa.ai•4w ago

Hi @rschmied. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about configuring devProxy for both regular requests and WebSocket connections to the same GraphQL endpoint in Nuxt 3, I can provide some guidance based on the available information. The devProxy configuration in Nuxt 3 is based on unjs/httpxy (https://github.com/unjs/httpxy), which supports WebSocket proxying. However, the exact configuration you're looking for isn't directly covered in the provided knowledge sources. That being said, we can try a combined approach based on the available information:

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      '/query': {
        target: '<http://localhost:8080',>
        changeOrigin: true,
        secure: false,
        ws: true
      }
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      '/query': {
        target: '<http://localhost:8080',>
        changeOrigin: true,
        secure: false,
        ws: true
      }
    }
  }
})

This configuration should handle both HTTP and WebSocket connections to the /query endpoint. The ws: true option enables WebSocket proxying for this route. A few important points to note: 1. The devProxy option is specifically for development mode, as mentioned in the Nitro configuration guide (https://nitro.unjs.io/config#devproxy). 2. If you're using Nuxt 3.15.0, make sure you have the latest version of Nitro, as WebSocket support has been improved in recent versions. 3. The configuration above assumes that your GraphQL server is handling both HTTP and WebSocket connections on the same endpoint (<http://localhost:8080/query>). If this is not the case, you might need to set up separate proxy rules. If this configuration doesn't work as expected, you might need to explore more advanced setups. Unfortunately, the provided knowledge sources don't contain specific information about handling both HTTP and WebSocket proxying for GraphQL in Nuxt 3. For a more definitive answer or if you continue to face issues, I recommend: 1. Checking the latest Nuxt and Nitro documentation for any updates on WebSocket proxying. 2. Raising an issue on the Nuxt GitHub repository (https://github.com/nuxt/nuxt) with a minimal reproduction of your setup, as this seems to be a specific use case that might require attention from the Nuxt team. Hmm, I do not have enough information to provide a complete solution to your specific setup, especially regarding the module you mentioned for handling WebSocket upgrades. If you continue to face issues, it might be worth exploring server middleware or custom server setups in Nuxt, but these approaches would require careful consideration of your specific requirements and environment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@1150790093368475739> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rschmiedOP•4w ago

[email protected] nuxt/[email protected] for the record. also bun 1.1.36 and node 23.3.0 more debugging and putting together a small test environment revealed that this is likely a bun issue. as it works as expected with node and when I said "works as expected" then I mean that with bun, proxying websockets doesn't work at all (from what I can tell). With node, it does work as expected. I need to see if my original problem actually isn't a problem now that an apparently underlying issue has been revealed.

Gaming

Programming

devProxy with path both for regular requests and websockets