Ionic-framework: [ionic v4] service proxy configuration not working

[aperrot42]

Bug Report

Ionic Info

✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.1.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v8.10.0 (/usr/bin/node)
   npm    : 3.5.2
   OS     : Linux 4.15

Describe the Bug
proxy setting in ionic.config.json is not working.

Steps to Reproduce

1. Start a ionic v4 project based on an official template :

ionic start myProj tabs
cd my myProj

1. Change the ionic.config.json file and add a proxies key as described in https://ionicframework.com/docs/cli/configuring.html#service-proxies

 "proxies":[{
      "path": "/about",
      "proxyUrl": "https://www.google.com/about/"
  }]

1. Modify the link in myProj/src/app/home/home.page.html to make the link point to /about (instead of "https://ionicframework.com/docs") :

  <p>If you get lost, the <a target="_blank" rel="noopener" href="/about">docs</a> will be your guide.</p>

1. Run the app and try the link, it will not work.

ionic serve

Related Code

Expected Behavior
I expect the application to navigate to https://google.com/about

Additional Context

Note that for Ionic v3 this configuration works as expected.

[shatfield]

I am seeing this problem as well.

[furlongce]

Also impacted

[juliengloria]

You have to deal with the new file : proxy.conf.json
Check angular documentation

[furlongce]

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.

[deemi47]

I am also facing same issue?
any one guide me with all steps , how to solve this issue?

[GordoRank]

I have the same problem. My proxy.config.json file works fine in browser but not on Android.

[juliengloria]

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

[dwaldrum]

Anyone figure this out? Can proxy with ionic serve too, but not run, which makes testing with a backend on the device difficult.

Anyone know of a workaround?

[anan1129]

me too

[moleisking]

I am getting the same issue too.

[joelcogen]

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.

[mollaie]

hi
I setup angular proxy and it's working fine on web, but when I published my app on android the proxy does not work and I'm facing with error 404,
this is my proxy code :
{ "/Api": { "target": "my-host-address/Api", "changeOrigin": true, "secure": false, "logLevel": "debug", "headers":{ "DeviceId":"1066", "LanguageId":"1", "ClientVersion":"1.0", "PlatformId":"3", "Content-Type":"application/json" }, "pathRewrite": {"^/Api" : "http://my-host-address"} } }

any one has idea ??

[codewithtushar]

Not working for me, getting below error.

MacBook-Pro:secure_crm Tushar$ ionic serve

ng run app:serve --host=0.0.0.0 --port=8100
[ng] Schema validation failed with the following errors:
[ng] Data path "" should NOT have additional properties(proxyConfig).

[ERROR] ng has unexpectedly closed (exit code 1).

    The Ionic CLI will exit. Please check any output above for error details.

[godenji]

The comment here points to how to correctly setup proxy config in Ionic v4. However, as others have mentioned in this thread, something has broken for native builds in latest Ionic + Angular, perhaps related to angular-schematics (?).

For example, ionic cordova run android -l fails with the OP's error message. This worked previously, in my case it seems to be related to the switch from ng-toolkit to angular-toolkit.

[godenji]

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"
  }
}

[georgechr]

Not working for me, getting below error.

MacBook-Pro:secure_crm Tushar$ ionic serve

ng run app:serve --host=0.0.0.0 --port=8100
[ng] Schema validation failed with the following errors:
[ng] Data path "" should NOT have additional properties(proxyConfig).

[ERROR] ng has unexpectedly closed (exit code 1).

    The Ionic CLI will exit. Please check any output above for error details.

There seems to be an issue with the latest version of ionic/angular-toolkit for this. I had the same issue, then downgraded and everything was working again

[georgechr]

Is this going to get fixed? It's really getting in the way of updating our dependencies.

[mmmmyers]

Is there a workaround for this? proxyConfig is working on web builds but still not working on compiled ios or android apps :(

ionic CLI 4.10.3
@angular/core": “7.2.15”
@ionic/angular": “4.4.0”

[sahyun1]

@georgechr can you tell me which version you downgraded to?

[zevlio]

Same problem here, any updates ?

[sahyun1]

I end up using native plugin

[zevlio]

yes but then you cannot see your requests by inspecting your device... Not nice for debug...

[sahyun1]

@zevlio couldn't agree more

[ranafeb14]

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 ([email protected])
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 ?

[marleyiam]

I'm struggling to death with this. Does someone had overcoming such issue lately by any instance ?

[marleyiam]

Well... once I need to move forward I did the job by going native with https://ionicframework.com/docs/native/http.

By doing so, no more CORS issues.

BUT, obviously life is not that easy, I had problems about inject HTTP library.

After some headache I could going further by running:

• npm i @ionic-native/http@beta --save
• npm i @ionic-native/core@beta --save

Why beta? at this point I no longer care.

Hope it can help someone else.

[SimMue]

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

[maiconm]

i'm facing this problem too...

[leonicoletti]

I also face the same issue.

[villarin]

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"
  }
}

Thanks for this one. It gave me the clue I needed. But probably more suited for the ionic serve target.
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "app:build", "proxyConfig": "proxy.conf.json" },

[htejwani]

Any update on this as it is not working with cordova/android device?

[mansurov1024]

It's still not working..

[sebastiendelorme]

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')

[SnpDeveloper]

I am following this thread for quite a long time?

A summary from my end too:

When I run in device as live reload it works since serve uses proxy.conf.json

ionic cordova run android -l

Same, if I run "ionic cordova run android" it gives 404 / unknown error.

I am not sure how can we deploy apps using ionic when people are struggling with basic http request not working in devices? Please correct me if I am missing any thing fundamental?

[Crazy-kun]

I just create a new project with ionic v5 to develop the PWA application, but a can’t do it without API requests to my backend locally. This is a basic feature, why it’s not working?

[ethanbrooks]

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

[arafathnihar]

I am getting the same issue too.

[muhamedkarajic]

Can someone solve this, I was trying this proxy.conf.json approach it's setting my proxy to domain.com I think cause it's https but when i try to do it with localhost it's not working. I tried to put secure: false... but nothing seems to work.

[muhamedkarajic]

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')

This is working partly so it's probably possible to make this a working version.

[muhamedkarajic]

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"
}
}

[tatianilima]

Same problem here with ionic 5, proxy not working

[greaterking]

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/

[marracuene]

Having a similar issue. proxy.conf.json is fine for dev but not for prod. Cross-linking to a post (strictly, a comment on someone else's post) I put on Ionic forum about this.
https://forum.ionicframework.com/t/cors-issue-while-shaping-working-web-app-into-a-native-ionic-app-for-android-w-capacitor/195697

[LuisManuel1983]

Ok so, I really tried this to work but proxies simple are not working in Ionic. I'm trying to see pdf files in Ionic using ng2-pdf-viewer and the domain where I want to extract the pdf files has a cors issue and I don't have access to that server

I followed the messages of @sebastiendelorme @muhamedkarajic & @greaterking but here is what I see:

My proxy.conf.json:
{ "/files": { "target": "https://www.my-pdf-page.com/files/", "changeOrigin": true, "secure": false, "logLevel": "debug" } }

When I do Ionic serve this is what I see

[ng] [HPM] Proxy created: /files -> https://www.my-pdf-page.com/files/
[ng] [HPM] Subscribed to http-proxy events: [ 'error', 'close' ]

But when I do a get for example to this: http://localhost:8100/files/2019_Annual_Report.pdf

I get an 404 even though in the terminal console I can see this:

[ng] [HPM] GET /files/2019_Annual_Report.pdf -> https://www.my-pdf-page.com/files/

I even tried runnig ionic serve -- --proxy-config proxy.conf.json and still the same problem

So yeah... Hope this gets fixed some day. The work around for us was building a proxy on our backend that looks for the pdf and then serves it to the app

[tofra]

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

[LuisManuel1983]

OMG dude @tofra Thank you so much, that finally did it

For anyone else that reads this, the trick that did for me is that, if for example you want to access something at:

https://www.my-pdf-page.com/files/pdfs/demo.pdf

Then the proxy should be

"/files/pdfs": {
"target": "https://www.my-pdf-page.com",
"changeOrigin": true,
"secure": false,
"logLevel": "debug"
}

And the url to make the call from your code should be "/files/pdfs/demo.pdf"