Angular CLI HTTP Proxy Cloud Function Configuration

Question

Is it possible with Angular CLI and http-proxy-middleware to intercept/proxy calls to an external URL such as a cloud server-less function like Azure Functions or Firebase functions?

For example, targeting an external cloud based function URL such as https://foobar.azurewebsites.net/api/SampleHttpFunction?code=123ABC456XYZ==, how would you set up the proxy.conf.json to intercept this URL/path?

The following configurations did successfully intercept the HTTP request (target is set to locally running cloud function localhost port for development purposes). Angular application is started using command "ng serve --proxy-config proxy.conf.json --open".

{
  "/api": {
    "target": "http://localhost:1234",
    "secure": false
  }
}

{
  "foobar.azurewebsites.net/api": {
    "target": "http://localhost:1234",
    "secure": false
  }
}

{
  "**/api": {
    "target": "http://localhost:1234",
    "secure": false
  }
}

The HttpClient calls to https://foobar.azurewebsites.net/api/SampleHttpFunction?code=123ABC456XYZ== with any of these configurations still goes to the production cloud function URL rather than http://localhost:1234/api.

Update: Per the suggestion I tried using the multiple entry configuration and starting the application with ng serve --proxy-config proxy.conf.js --open, but it still does not catch the HTTP call:

const PROXY_CONFIG = [{
  context: [
    "/api",
    "**/api",
    "**/api/*",
    "https://foobar.azurewebsites.net/api/",
    "foobar.azurewebsites.net/api/",
    "foobar.azurewebsites.net/api/*",
    "*foobar.azurewebsites.net/api"
  ],
  target: "http://localhost:1234",
  secure: false
}]

module.exports = PROXY_CONFIG;

Thank you for any help you can provide!

Answer 1

I had this type of issue with my app where the intercept is only catching the first proxy config. I had to use the JS formatted proxy instead.

const PROXY_CONFIG = [{
  context: [
    "/api",
    "foobar.azurewebsites.net/api",
    "**/api"
  ],
  target: "http://localhost:1234",
  secure: false
}];

module.exports = PROXY_CONFIG;

create a file called proxy.conf.js and replace the proxy.conf.json from package.json with the js file and try.