CORS issue while shaping working web app into a native Ionic app for Android w/ capacitor

Ionic Framework Ionic Angular
1

I’ve been trying to set up this Ionic CLI proxy server following this guide, but it’s from 2015 and I have no idea how to implement it in Angular 10.

So when I run my app with a command:

ionic capacitor run android --project=myApp -c=production

I have this error in Android Studio:

E/Capacitor/Console: File: http://localhost/login - Line 0 - Msg: Access to XMLHttpRequest at 'https://remoteServer.com/api/v1/oauth/v2/token' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' head

This is my capacitor.config.json file:

{
  "appId": "io.ionic.starter",
  "appName": "myApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {},
  "linuxAndroidStudioPath": "/opt/android-studio/bin/studio.sh"
}

And this is my ionic.config.json file:

{
  "name": "myApp",
  "integrations": {
    "capacitor": {}
  },
  "type": "angular",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "https//remoteServer.com/api"
    }
  ]
}

ionic info

Ionic:

   Ionic CLI                     : 6.10.1 (/home/user/.nvm/versions/node/v12.18.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.1000.5
   @angular-devkit/schematics    : 10.0.5
   @angular/cli                  : 10.0.5
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.3 (/home/user/.nvm/versions/node/v12.18.3/bin/node)
   npm    : 6.14.6
   OS     : Linux 5.4

Any ideas how to resolve this? I’ve been searching for ages…

2

I’ve never used any of this, but ordinarily there’s a ‘:’ between https and //.

1 Like
3

thanks, I fixed that as soon as I posted this issue but nothing changed…

4

I am suffering exactly the same problem. If I can add some extra info based on my research…

  1. It seems like Ionic at least up to v3 did support this feature, which they call “service proxies”.
    ( I had put a link to the ionic documentation here, but strangely the forum does not allow me to link to it! )
    https://ionicframework.com/docs/v3/cli/configuring.html

And there are still a lot of tutorials around on the web basing themselves on this.

  1. However in the current documentation all mention of these proxies has been removed. But I cannot find any release notes or blog posts about this.

  2. Furthermore there is a long-running Issue on GH about this same problem, starting in Ionic 4:
    search for /ionic-team/ionic-framework/issues/16233 on github, as the forum does not allow me to post a link.

But the Ionic Team do not appear to be responding on it.

  1. The responses there all suggest using proxy.conf.json so that ANGULAR (rather than IONIC) can handle proxying. And indeed proxy.conf.json works perfectly for Dev. However for Production deployment on a Mobile device, when you want to use the local server which Ionic runs anyway on localhost, to avoid CORS issues, AFAIK the Angular proxy option is not available.
    So then you are forced to switch to the native HTTP client on the device, which has a completely different API, doesn’t even load for desktop development, etc.

Alternatively you can proxy everything through your own backend, but this means additional network traffic and compute work. Plus for some things like Geolocation will not even work.

We are currently evaluating Ionic+Angular for use in a cross-platform development, and in general it is a great solution. However this specific issue is close to being a deal-breaker for us.

In conclusion it seems that, without explicitly stating it, Ionic somehow dropped support for “service proxies” and left people to use the Angular proxy.

Would be really nice if someone from the Ionic team could help clarify things here.