Worked for me using the doc here: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Namely, moving the config to proxy.conf.json and adding "proxyConfig": "proxy.conf.json" to angular.json.

You can try this:

For example, if you want to get data from this URL: https://domain.com/api/v5/

Edit proxy.conf.json file like tihs:

{
  "/v5": {
    "target": "https://domain.com/api/",
    "changeOrigin": true,
    "secure": true,
    "logLevel": "debug"
  }
}

Then, edit Angular.json:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "proxyConfig": "proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },

Run the app with: ionic serve -- --proxy-config proxy.conf.json

If you want to get data from https://domain.com/api/v5/xxx, you need to write: this.http.get('v5/xxx')

OK with ionic serve, but not with RUN ios / android / browser

Hello, by creating proxy.conf.json and running ionic serve the proxy is added automatically.

Here is a sample on how the proxy needs to look like. I hope this helps someone:

{ “/api”: { “target”: “http://localhost:53875/”, “changeOrigin”: true, “secure”: false, “logLevel”: “debug” } }

Thanks, but the problem is not with our understanding of Angular. We’re all using proxy.conf.json… It works with Ionic V3, but not V4. It works in a web browser, but not on a device.

I am seeing this problem as well.

What @muhamedkarajic mentioned above is the only thing that currently works.

1. create a file called proxy.conf.json in root of project
2. update the angular.json around the section where the serve command is defined

...
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
     --> "proxyConfig": "proxy.conf.json" <-- add this line
          },
          "configurations": {
...
 

1. run ionic serve and thats it …it will automatically use the proxy json file without the use of any flags

I could not get anything to work using ionic.config.json…wasted a lot of time on this so hopefully this will help others. There is no reason why this shouldn’t work right out of the gate as making calls from local is pretty much how a lo of us start, build, and test our projects…just saying.

reference: https://www.leonelngande.com/how-i-used-ionic-4-cli-proxy-to-redirect-api-requests-and-avoid-cors-errors/

Our company is facing the same problem.

We developed several ionic v3 apps and heavily used the proxy-configuration for development purposes (VSCode + Cordova-Extension with live-reload = true) Now we would like to upgrade some apps to ionic v4 using the newest CLI but can’t due to this restriction. This slows down our development process as we need many different native components in our apps and have to test the apps directly on the device.

Hopefully this get fixed ASAP

If I remove the proxyConfig line from below angular.json config then that “fixes” the issue in the sense that the Android build will compile, but it’s useless since the local dev proxy to the API server isn’t present so the app doesn’t work in dev mode.

"ionic-cordova-serve": {
  "builder": "@ionic/angular-toolkit:cordova-serve",
    "options": {
    "cordovaBuildTarget": "app:ionic-cordova-build",
    "devServerTarget": "app:serve",
    "proxyConfig": "proxy.conf.json"
  }
}

It’s still not working…

Ionic:

Ionic CLI : 5.0.2 (/home/user/.nvm/versions/node/v11.12.0/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.1.2 @angular-devkit/build-angular : 0.13.7 @angular-devkit/schematics : 7.2.4 @angular/cli : 7.3.7 @ionic/angular-toolkit : 1.4.1

Cordova:

Cordova CLI : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.1.4, ios 4.5.5 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 11 other plugins)

Utility:

cordova-res : not installed native-run : 0.2.5

facing same issue with ionic 5.0.2. Any alternate solution ?

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. Please read below for an explanation of what is going on and how to resolve the issue in your applications:

Summary: Starting with Ionic v4+, your proxies are managed by the Angular CLI, and Ionic does not alter them in any way. See https://angular.io/guide/build#proxying-to-a-backend-server for instructions on how to configure proxies in your app.

Full Explanation: In Ionic v3, we relied on our own CLI scripts to compile and serve your application. During that time, proxies were supported by the Ionic CLI via the ionic.config.json file as noted in the original post. When we moved to Ionic v4, we removed our own CLI scripts (ionic-app-scripts) in favor of using the Angular CLI. The Angular CLI supports proxies via a proxy.conf.json file as noted in this thread.

Here is a guide on the Angular docs that shows you how to setup proxies in your apps: https://angular.io/guide/build#proxying-to-a-backend-server

Using the proxy.conf.json file I can confirm that proxies are working as expected now. For developers using Capacitor that are running into CORS issues with proxying you may need to use the Capacitor Community HTTP Plugin. See https://capacitorjs.com/blog/bypassing-cors-with-the-http-plugin for more information.

Any update to this issue?? I am using Ionic 5 + Angular 11. Proxies sre working fine on web browser but not working on device. Its been two days and I am still searching for the solution. Or the wrapper around ionic native http and angular httpclient can solve this issue?

@LuisManuel1983 try changing the target in proxy.conf.json to “https://www.my-pdf-page.com”

Just another person having the same issue with Ionic v5 who is hopping to see this resolved. 😉