Ionic 5, Android CORS, HTTP issues

Ionic Framework
1

I’d love some help here because this has driven me a bit crazy for two days now.

Our Ionic 3 app works fine in the browser and on iOS and Android devices. It uses the Angular HTTPClient for all its api calls and all those calls are over https. Because of the CORS issue that occurs on iOS Devices we use the ionic-native-http-connection-backend plugin and this has always worked well. In the app module we use the following code which ignores this plugin for Android devices as CORS has never been an issue for us on Android:

// see https://github.com/sneas/ionic-native-http-connection-backend/issues/15
{
  provide: HttpBackend,
  useFactory: (platform: Platform, nativeHttpBackend: NativeHttpBackend, httpXhrBackend: HttpXhrBackend) => {
    if (platform.is('android')) {
      return httpXhrBackend;
    } else {
      return new NativeHttpFallback(platform, nativeHttpBackend, httpXhrBackend);
    }
  },
      deps: [Platform, NativeHttpBackend, HttpXhrBackend]
},

I have now migrated this application to Ionic 5 and Angular 10 and although everything is working ok in the browser and on iOS, when the app opens up and the user tries to login on Android, the initial POST call results in a CORS error - something I’ve never had on Android devices and something that does not occur on the same test devices when using the Ionic 3 version of our app.

If I change the above code so that the nativeHTTPFallback occurs for Android as well as IOS then the CORS error disappears but NOTHING happens - there is no response from the server, nothing at all.

Does anyone have any idea why I might be running into these issues with Ionic 5 and Angular 10? Surely I should be able to use the Angular HTTPClient on Android devices in an Ionic 5 app?

I did make a test call with the Ionic native HTTP i.e using

import { HTTP } from '@ionic-native/http/ngx';

and that appeared to work. However, our app makes extensive use of an http-interceptor and it looks like that doesn’t work with the native http - I tried logging something from the interceptor and nothing appeared.

Another option might be the Capacitor Community HTTP plugin but I have no idea if that would work with the interceptor either?

Really struggling to work out why this won’t work in Ionic 5 / Angular 10 so any help or advice would be appreciated!

2

Sounds like a difficult issue

Maybe try to build from scratch with an empty app adding and testing until the thung that fails appears?

(So change of debugging dtrategy)

3

Can you check the CORS error and see which origin is trying to access the resource? If you know the origin that is making the requests, there are a couple of places (depending on this origin) where you can fix it.

4

Thanks - I’ve actually spoken to our server administrator and it looks like we will be enabling CORS for our two app origins so I may be able to keep this simple and not require the CORS workarounds at all. I hope so anyway - I love to remove a dependency!

5

You using Capacitor or Cordova?

6

Both - have switched to Capacitor but still rely on a few Cordova plugins

7

Make sure your importing at the component module:

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { HttpInterceptorService } from '../interceptors/http.interceptor';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    HttpClientModule,
    ComponentsModule,
    RouterModule.forChild(routes)
  ],
  exports: [
    CommonModule,
    ComponentsModule
  ],
  declarations: [ ComponentPage ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true }
  ]
})
8

Hi - yes I’m importing it correctly. I think my issues with the interceptor is that it will work with the angular HttpClient but not the Ionic native http (well it didn’t seem to for me anyway)

9

All working ok now. Firstly, because we are in control of the server I was able to talk our administrator into allowing the requests in (we specify the two device origins in the capacitor config). Secondly, because we need to use htttp-interceptors we are sticking with the Angular HttpClient (I love http-interceptors so not being able to use them is a major drawback for me of using anything but the HttpClient). The nice thing about all this is that we are now able to remove two dependencies from the app (the advanced-http-plugin and the ionic-native-http-backend-plugin) and anything that reduces dependencies is a good thing!

1 Like