nuxt 3

[zerounix]

Hi guys,

any chance this module works with nuxt3?

In dev mode everything seems to work, but if i build the project (ssr) it stops working (getting timeouts).

[dargmuesli]

So the issue is that in here

proxy-module/src/index.ts

Line 14 in 16c58d3

if (!nuxt.options.server || !nuxt.options.proxy) {

options.server is false on

• nuxt 2 build
• nuxt bridge build

but it is populated only on

• nuxt 2 start

meanwhile on nuxt bridge it is never called. I don't know why that is though, just noticed.

[appinteractive]

Bump 👋 what's the status? Anyone here?

When I try to run Nuxi Build with Bridge I get the following error:

ERROR  Rollup error: Could not load /Users/Username/projects/nuxt-app/.nuxt/dist/server/server.mjs (imported by node_modules/@nuxt/nitro/dist/runtime/app/render.mjs): ENOENT: no such file or directory, open '/Users/Username/projects/nuxt-app/.nuxt/dist/server/server.mjs'


FATAL  Could not load /Users/Username/projects/nuxt-app/.nuxt/dist/server/server.mjs (imported by node_modules/@nuxt/nitro/dist/runtime/app/render.mjs): ENOENT: no such file or directory, open '/Users/Username/projects/nuxt-app/.nuxt/dist/server/server.mjs'

[k0mar12]

Vite proxy is available in nuxt 3, much better, i guess https://vitejs.dev/config/#server-proxy

[lperez22]

So I have Vite proxy setup in nuxt 3, and its pretty much the same issue with this module in dev it works fine but in build it does not it doesn't even seem that it attempts to hit any routes

[Baiyuetribe]

+1

[katerlouis]

Same issue with nuxt-bridge: proxy is working fine with $ npm run dev but not with $ npm run start
Well, at least the dev command is showing something regarding the proxy in cli (see screenshots) while the start command isn't

[Shugar]

Any luck with this one?

[jariesdev]

I'm also experiencing this issue. in "dev" works fine but production wasn't .

[lperez22]

For a workaround until this module is updated for Nuxt 3 I am able to have proxies by creating the following file in this folder
server/middleware

import httpProxy from 'http-proxy';

const testProxy = httpProxy.createProxyServer({
  target: 'https://example.com/',
  changeOrigin: true,
  headers: { 'item': process.env.Whatever },
  ssl: false,
  secure: false,
  ws: false,
});

export default function (req, res, next) {
  if (req.url.startsWith('/__test')) {
    const extraOptions = {};
    try {
      rssProxy.web(req, res, extraOptions);
    } catch (err) {
      // error handling
    }
  } else {
    next();
  }
}

[ahku]

For a workaround until this module is updated for Nuxt 3 I am able to have proxies by creating the following file in this folder server/middleware

import httpProxy from 'http-proxy';

const testProxy = httpProxy.createProxyServer({
  target: 'https://example.com/',
  changeOrigin: true,
  headers: { 'item': process.env.Whatever },
  ssl: false,
  secure: false,
  ws: false,
});

export default function (req, res, next) {
  if (req.url.startsWith('/__test')) {
    const extraOptions = {};
    try {
      rssProxy.web(req, res, extraOptions);
    } catch (err) {
      // error handling
    }
  } else {
    next();
  }
}

Does this still work? Nowadays the server routes use the defineEventHandler function. Anway, I could not get this to work, and I assumed that rssProxy.web() was a typo for testProxy.web()(?)

[femanzo]

Does this still work? Nowadays the server routes use the defineEventHandler function. Anway, I could not get this to work, and I assumed that rssProxy.web() was a typo for testProxy.web()(?)

Try this (change the options hostname and port to your proxy)

import http from 'http';

export default function (client_req, client_res) {
    const options = {
        hostname: 'localhost',
        port: 4743,
        path: client_req.url,
        method: client_req.method,
        headers: client_req.headers
    };

    const proxy = http.request(options, function (res) {
        client_res.writeHead(res.statusCode, res.headers)
        res.pipe(client_res, {
            end: true
        });
    });

    client_req.pipe(proxy, {
        end: true
    });
}

[nazar1ua]

I think there are no planned nuxt 3 support, because see on last commit — there are no activity. only if new contributors will appear

[AndersNielsen85]

@femanso Thanks for the example.
I came up with this to proxy in a sitemap.xml using defineEventHandler (@ahku).
Used a switch as I will be adding some more proxy urls later, but it can of course be done without :)

export default defineEventHandler((e) => {
  const options = {
    hostname: 'localhost',
    port: 3002,
    path: e.req.url,
    method: e.req.method,
    headers: e.req.headers
};
  switch(e.req.url) {
    case '/sitemap.xml':
    const proxy = http.request(options, function (res) {
      e.res.writeHead(res.statusCode, res.headers)
              res.pipe(e.res, {
                  end: true
              });
          });
    e.req.pipe(proxy, {
        end: true
    });
    break
  }
});

[z3cka]

I tested nuxt-proxy today, and it works like a charm.

[torressam333]

@z3cka How did you get this to work with nuxt 3's nuxt.config.ts defineConfig object? I see errors thrown with the rewrite option after defining a target.

[z3cka]

@z3cka How did you get this to work with nuxt 3's nuxt.config.ts defineConfig object? I see errors thrown with the rewrite option after defining a target.

I didn't. I used the project found at https://github.com/wobsoriano/nuxt-proxy#usage

IIRC it did work at the time, but we've since gone with a more robust reverse proxy implemented with nginx as per our requirements. Also, the above linked project recommends looking into h3's proxyRequest -> https://www.jsdocs.io/package/h3#proxyRequest as h3 is what Nuxt3 uses under the hood.

Good luck!

[paul-asvb]

The proxy can also be configured through nitro docs in the nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      "/proxy/test": "http://localhost:3001",
    },
  },
});

[harlan-zw]

Will track Nuxt 3 support here: #118

Thank you for all the discussions and work arounds :)