Browser won't load scripts and modules anymore once I specify a path for the proxy in my backend.

[fonzane]

So I want to proxy all requests that hit my nestjs backend on a certain path to another webserver (and have that path removed). But once I specify a path for the proxy, the proxying doesn't work anymore.

To test this, I run a simple angular application on localhost:4200 and my nestjs-backend runs on localhost:3000. This code works:

reverse-proxy-middleware.ts

export class ReverseProxyMiddleware implements NestMiddleware {
    private proxy = createProxyMiddleware(
    {
        target: 'http://localhost:4200',
        changeOrigin: true,
        logLevel: 'debug'
    })

    use(req: Request, res: Response, next: (error?: any) => void) {
        this.proxy(req, res, next);
    }
}

app.module.ts

export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
      consumer
        .apply(ReverseProxyMiddleware)
        .forRoutes('/')
  }
}

But once I specify a path like .forRoutes('/proxy'), the browser won't load the scripts and styles anymore. I can reach the base-page but no modules ever get loaded. I tried to change the <base href="/proxy"> in the angular app, tried to addpathRewrite: {'^/proxy': ''} or ignorePath: true to the middleware configuration but nothing works. Is there a way to proxy all the requests from http://localhost:3000/proxy just to http://localhost:4200 and also load all the scripts and modules properly?

Thanks for help already

[chimurai]

I'm not really familiar with NestJS.
Do you have a minimal NestJS repo?

[fonzane]

I also found this repo.

[chimurai]

Don't see any proxy implementation in your minimal repo.

Would be helpful if you can provide a minimal reproducible implementation of the problem you're facing.

[fonzane]

I rebuilt the repo and it now has a minimal angular app with nestjs backend. I prepended an installation guide to the readme.md and you can find the proxy configuration I started with in apps/api/src/app/main.ts. The goal is to be able to visit the backend with a browser http://localhost:3333/proxy and be redirected to the angular app which listens on http://localhost:4200.

[fonzane]

I think the problem is that the first request gets proxied correctly (http://localhost:3000/proxy -> http://localhost:4200), but the follow up requests ask for the files in the wrong location e.g. http://localhost:4200 -> http://localhost:3000/runtime.js.

So in order to make it work, I had to configure a proxy in the angular app as well so the requests would kinda go from http://localhost:4200 -> http://localhost:3000/proxy/runtime.js?

This seems to not be an issue with http-proxy-middleware, but I hope this threat is still welcome here as we're all on a learning journey, I assume. 🙂

[SilverRat]

Sounds like an issue I had, have you tried setting changeOrigin: false?