Proxying requests from inside of SSR

[makkarpov]

Is there any proxy module that will work with Nitro's global $fetch and when that $fetch is called from SSR context?

Right now simple adaptation of http-proxy module works with non-SSR requests, but stucks in infinite loop when SSR fetch request is made:

import {defineEventHandler, IncomingMessage} from "h3";
import Proxy from 'http-proxy';

const proxy = Proxy.createProxyServer({
    target: 'http://jsonplaceholder.typicode.com/',
    changeOrigin: true,
    ws: true
});

proxy.on('end', req => {
    console.log('end! ', req.url);
    (<IncomingMessage> req).event.context['proxyResolve']();
});

export default defineEventHandler(event => {
    if (event.req.url.startsWith('/api/')) {
        event.req.url = event.req.url.replace(/^\/api/, '');
        return new Promise((resolve) => {
            event.context['proxyResolve'] = resolve;
            proxy.web(event.req, event.res);
        });
    }
});

end callback is never getting fired. I suppose that req/res objects are mocked somehow in SSR context, and this mock is not compatible with http-proxy module.

Right now this issue makes $fetch completely useless (and harmful because it pollutes global namespace) thing inside Nuxt 3, because you will never get any external data with it.

[makkarpov]

There is another possibility on how to deal with this: just introduce setting for $fetch to always do full-blown HTTP request for certain prefixes (e.g. /api).

[ASISBusiness]

Is there any proxy module that will work with Nitro's global $fetch and when that $fetch is called from SSR context?

Right now simple adaptation of http-proxy module works with non-SSR requests, but stucks in infinite loop when SSR fetch request is made:

import {defineEventHandler, IncomingMessage} from "h3";

import Proxy from 'http-proxy';



const proxy = Proxy.createProxyServer({

    target: 'http://jsonplaceholder.typicode.com/',

    changeOrigin: true,

    ws: true

});



proxy.on('end', req => {

    console.log('end! ', req.url);

    (<IncomingMessage> req).event.context['proxyResolve']();

});



export default defineEventHandler(event => {

    if (event.req.url.startsWith('/api/')) {

        event.req.url = event.req.url.replace(/^\/api/, '');

        return new Promise((resolve) => {

            event.context['proxyResolve'] = resolve;

            proxy.web(event.req, event.res);

        });

    }

});

end callback is never getting fired. I suppose that req/res objects are mocked somehow in SSR context, and this mock is not compatible with http-proxy module.

Right now this issue makes $fetch completely useless (and harmful because it pollutes global namespace) thing inside Nuxt 3, because you will never get any external data with it.

[stafyniaksacha]

end callback is never getting fired. I suppose that req/res objects are mocked somehow in SSR context, and this mock is not compatible with http-proxy module.

The end callback you subscribed does not exist in the root proxy instance (https://github.com/http-party/node-http-proxy#listening-for-proxy-events)

It's better to use the web callback function to resolve the event

import {defineEventHandler, IncomingMessage} from "h3";
import Proxy from 'http-proxy';

const proxy = Proxy.createProxyServer({
  target: 'http://jsonplaceholder.typicode.com/',
  changeOrigin: true,
  ws: true
});
 
export default defineEventHandler(event => {
    if (event.req.url.startsWith('/api/')) {
        event.req.url = event.req.url.replace(/^\/api/, '');
        return new Promise((resolve, reject) => {
            proxy.web(event.req, event.res, {}, (error) => {
              if (error) return reject(error)
              resolve()
            });
        });
    }
});

If you want to manage the response, you may want to switch the selfHandleResponse to true and then listen to proxyRes event

[stafyniaksacha]

Hum, I'm facing the same issue with callback, it's never called, in addition I get this error:

[nuxt] [request error] Invalid value "undefined" for header "host"
  at ClientRequest.setHeader (node:_http_outgoing:579:3)  
  at new ClientRequest (node:_http_client:262:14)  
  at Object.request (node:http:96:10)  
  at Array.stream (./node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:126:74)  
  at ProxyServer.<anonymous> (./node_modules/http-proxy/lib/http-proxy/index.js:81:21)  
  at ./.nuxt/dev/index.mjs:410:11  
  at new Promise (<anonymous>)  
  at ./.nuxt/dev/index.mjs:409:10  
  at ./node_modules/h3/dist/index.mjs:309:14  
  at Object.handler (./node_modules/h3/dist/index.mjs:509:12)

@pi0 do you have some recommendations on how to proxy requests with nuxt3/nitro?

Here is a reproduction link: https://stackblitz.com/edit/github-ucabud?file=server/api/[...path].ts

[motea927]

Hi, this is work for me

// server/api/[...path].ts
import { defineEventHandler, proxyRequest } from 'h3';

export default defineEventHandler((event) => {
  const { url } = event.node.req;
  if (!url) return;

  // your target domain
  const domain = 'http://localhost:3000';
  return proxyRequest(event, `${domain}${url}`);
});