0

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!

Alexander Staroselsky
  • 37,209
  • 15
  • 79
  • 91

1 Answers1

0

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.
Prav
  • 2,785
  • 1
  • 21
  • 30
  • I tried using the `proxy.conf.js` multiple entry configuration as you suggested with a number of patterns and starting with `ng serve --proxy-config proxy.conf.js --open`, but unfortunately it did not work. The HTTP calls still go to the production azure function URL. It sounds like the configuration would need additional options to look at the full URL of the HTTP call. It will be about catching the domain/origin as well. – Alexander Staroselsky Sep 03 '17 at 15:30