I’m fetching data using axios and external API (non-https), everything is working fine with web version, postman, even with my phone’s browser.
But I can’t get it working on my actual device. Android Studio is telling me there is “an network error”, the request is sent to the server but the server didn’t respond. That’s all.
I configured CORS following the official Ionic documentation. I’ve set all needed origins and options (can’t use * origin because I have to use credentials with my requests). Also tried without Nginx, without credentials/cookies, tried using ‘*’ origin but the error reoccur.
Server:
const allowedOrigins = [
'capacitor://localhost',
'ionic://localhost',
'http://localhost',
'http://localhost:8080',
'http://localhost:8100'
];
// Reflect the origin if it's in the allowed list or not defined (cURL, Postman, etc.)
const corsOptions = {
origin: (origin, callback) => {
if (allowedOrigins.includes(origin) || !origin) {
callback(null, true);
} else {
callback(new Error('Origin not allowed by CORS'));
}
},
credentials: true,
optionsSuccessStatus: 200,
exposedHeaders: ["set-cookie"]
}
// Enable preflight requests for all routes
app.options('*', cors(corsOptions));
app.use(cors(corsOptions));
Client:
try {
const response = await axios('http://my.api.url', {
method: 'get',
withCredentials: true,
headers: {
'Accept': 'application/json'
}
});
const data = response.data;
// Do something with the data
} catch(error) {
console.log(error);
};
The main problem is that I’m not even sure if this is a http(s) or CORS related error.
Does the server return anything or do you get any errors? I’m having problems with Android today and when the call is made nothing happens. No Error, No response. Nothing. I’ve posted in the forum about it today.
No response from the server, too. I send the request and after that I catch an error as you can see in that try-catch block.
I saw your post a bit too late, just after I made this post. I think that this has something to do with HTTPS (I don’t know if your API has SSL or not). CORS configuration is the same as in documentation.
Weird thing is that I just used a generic HTTPS API I found on web and I get the same behaviour (like with my non-https API). Web app works, postman works, android 10 app on physical device does not.
I’ve just tested out my Ionic 3 app on the same Android 10 device pointing at the same server and it works fine. So it’s something in my project that’s making it go wrong even though I have removed and re-added the Android platform.
Update: I removed “androidScheme”: “http” and left “allowNavigation” field and looks like everything’s fine now. I’ll see tomorrow if the problem is really solved.
Update 2: Important thing is that it still does not work if I try that using non-https API, I had to use https API to get a response from server. But at least I know where is the problem.
Did you try to send a request to another API? I found one on the internet and everything is working properly after adding that one line, I still have to see if everything is working with my own server but since I didn’t set up SSL on my web server I can’t be sure.
Update: Added SSL to my webserver and now it works too. allowNavigation definitely sorted it out for me.
All working ok for us now. 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!
