I have an Ionic 5 app - all my http calls are working fine in browser and iOS but in Android they do nothing - no error, just nothing (and then a timeout). Does anyone have any pointers to things I need to look for? I’m using the angular HTTPClient and the device I am testing on is running Android 10. Is there some extra setup now that I need to do in an Ionic 5 / Capacitor app to get the calls working in Android?
2 Likes
Is your URL using HTTPS? Because if you make unsecure HTTP calls from Android, you would have to explicitly allow this from your config (Cordova) or inside the manifest (Capacitor).
You can fix it like described here if SSL is in fact the issue.
1 Like
Yes all the calls are HTTPS. I’ve narrowed the problem down a little bit but I’m still stuck. Our app uses the ionic-native-http-connection-backend to get round CORS issues but I am unable to get that to work correctly in Ionic 5 with Android - I raised an issue here
I’m wondering if my best bet is to look at the capacitor community HTTP plugin but that looks to be promise based so I would have to adapt it for my setup which is all observables. Also our app has a heavily used http-interceptor and I’m not sure if that would work with that plugin? @mhartington - will my http-interceptor work with that plugin?
@saimon I’m really stuck! It seems I cannot use the Angular HTTPClient in an Ionic 4 project on Android - but surely that cannot be the case!
Looks like we may be solving my issue by changing the CORS set up on the server…
no need for the pings…
So a few things…
The capacitor http plugin is promised based, but that’s rather easy to integrate with observables.
import { from } from 'rxjs';
from(myPromisedBasedFucntion)
.pipe(....)
As far as interceptors are concerned with, no the plugin does not support interceptors.
It seems I cannot use the Angular HTTPClient in an Ionic 4 project on Android - but surely that cannot be the case!
This is indeed not the case. Otherwise, we’d have more reports than just one person.
What I’d suggest is sticking with just HttpClient and either building a small middleware layer or changing CORS on the server. The middleware layer to me can be rather simple as all it needs to do is just proxy the request.
Thanks Mike - yes I have spoken to our server admin today and we are changing the CORS setting hopefully so I can continue with HttpClient. I’m puzzled by why this stopped working in Ionic 5 / Angular 10 but if the outcome is to remove the dependency on the native backend plugin then that’s all good! Sorry for ping!
Less likely that it’s an issue with Ionic/angular, and perhaps maybe an issue with Android or if you changed from cordova to capacitor.
One possibility might be changes in how the underlying WebView handles CORS - you could slog through this convo.
1 Like
Thanks. I took part in that discussion actually!
This is how i use ionic native/http and httpclient both returns observable at the end;
if you are at web and desktop then use httpClient from angular else use ionic native/ http
Angular httpClient - to debug in chrome without running in device.
Native http - so that we don’t need to handle cors anymore.
Component
this._api.getUsers().subscribe(users => {
console.log(users);
this.userList = users;
});
Service
getUsers(): Observable<any> {
if (this._platform.is('mobileweb') || this._platform.is('desktop')) {
return this._httpClient
.get<Observable<any>>('https://jsonplaceholder.typicode.com/users')
.pipe(
map((data: any) => {
return data.filter((user: any) => {
user.name = 'desktop ' + user.name;
return user;
});
}),
);
} else {
return from(
this._http.get('https://jsonplaceholder.typicode.com/users', {}, {}),
).pipe(
tap(data => console.log(data.data, Array.isArray(data.data))),
// map((data: any) => JSON.parse(data.data)),
tap(data => console.log(data.data, Array.isArray(data.data))),
map((data: any) => {
const users = JSON.parse(data.data);
return users.filter((user: any) => {
user.name = 'Mobile ' + user.name;
return user;
});
}),
);
}
}
Link: https://github.com/indraraj26/ionic5-starter-tabs-sidemenu/blob/602892b5f224ac25b6cdbb867ef46c6ce60ab979/src/app/services/api.service.ts
Branch: picker
I would not recommend using different HTTP clients as is described in the post above, if it can be avoided. When you have multiple code paths achieving the same thing, it just increases the number of variables to consider when something goes wrong.
1 Like
I agree - I’m sticking to the angular HttpClient for everything. I think (?) as we use an HttpInterceptor that it’s only choice anyway.
Http url doesn’t work in android directly, you need to add usesCleartextTraffic = true in android manifest file.
to do this all you need to do is add it in the config.xml file, like this
<platform name="android">
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:usesCleartextTraffic="true" />
</edit-config>
2 Likes
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
thanks a lot, bud. It resolved the issue
Actually, all it did was kick the can down the road for a bit. Why not take advantage of the New Year break and install a proper SSL certificate on the server so that your users can be more secure instead?
1 Like
Sure will do that 
This solved the issue for me. Thanks!