3

I'm running an Angular Universal application that is talking to an API. Now I'm trying to set up a proxy in the Universal server that proxies API requests to the actual API server:

  server.use(['/api', '/sitemap.txt'], createProxyMiddleware({
    target: process.env.API_URL,
    onProxyReq: req => {
      console.log('Using origin: ' + getOrigin(req.getHeaders()));
      req.setHeader('origin', getOrigin(req.getHeaders()));
    },
    pathRewrite: {'^/api': ''}
  }));

This works perfectly when running locally, but when running it on the server (Azure WebApp), it doesn't work. I can see the console log being called in the WebApp logs, but the resulting document is the Angular application with a message "page not found".

I'm totally out of ideas on where to look for solutions.

Edit:

I tried another proxy middleware and it does do the trick. This code works both locally and on Azure.


import * as proxy from 'express-http-proxy';

// ...

  server.use(['/api', '/sitemap.txt'], proxy(process.env.API_URL, {
    proxyPathResolver: req => {
      let url: string = req.url;

      if (url.startsWith('/api')) {
        url = url.substr(4);
      }

      return url;
    },

    proxyReqOptDecorator(proxyReqOpts, srcReq) {
      proxyReqOpts.headers['origin'] = getOrigin(proxyReqOpts.headers);
      return proxyReqOpts;
    }
  }));

But it has some other limitations that make it unusable for our project, so I still need this resolved.

Bart van den Burg
  • 1,340
  • 2
  • 13
  • 27

0 Answers0