Calling api not working on ios real device Ionic 5

Hi , i’m using ionic 5 , i my methods are working fine on android and browser while i tried it on ios it didn’t worked , i tried to use capacitor and also http native plugin nothing working i got errors like : {“headers”:{“normalizedNames”:{},“lazyUpdate”:null,“headers”:{}},“status”:0,“statusText”:"Unknown Error"
[error] - ERROR {“line”:4349,“column”:73,“sourceURL”:“capacitor://localhost/main-es2015.js”}

my package.json

{
  "name": "boyot",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "resources": "cordova-res ios && node scripts/resources.js",
    "resource": "capacitor-resources -p ios"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0",
    "@agm/drawing": "^1.1.0",
    "@agm/js-marker-clusterer": "^1.1.0",
    "@angular/animations": "^10.0.9",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/material": "^10.1.3",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@capacitor/core": "2.4.0",
    "@capacitor/ios": "^2.4.0",
    "@ionic-native/call-number": "^5.27.0",
    "@ionic-native/camera": "^5.27.0",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/geolocation": "^5.27.0",
    "@ionic-native/globalization": "^5.27.0",
    "@ionic-native/http": "^5.28.0",
    "@ionic-native/image-picker": "^5.27.0",
    "@ionic-native/launch-navigator": "^5.27.0",
    "@ionic-native/location-accuracy": "^5.27.0",
    "@ionic-native/network": "^5.27.0",
    "@ionic-native/photo-viewer": "^5.27.0",
    "@ionic-native/social-sharing": "^5.27.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic-native/youtube-video-player": "^5.27.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/storage": "^2.3.0",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
    "@types/hammerjs": "^2.0.36",
    "agm-overlays": "^2.0.0",
    "capacitor-resources": "^2.0.3",
    "cordova-ios": "5.1.1",
    "cordova-plugin-advanced-http": "^3.0.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "hammerjs": "^2.0.8",
    "ionic-pullup": "^4.0.0-beta.6",
    "js-marker-clusterer": "^1.0.0",
    "lodash": "^4.17.15",
    "moment": "^2.27.0",
    "ngx-bootstrap": "^5.6.1",
    "ngx-input-file": "^8.0.1",
    "ngx-progressive-image-loader": "^4.0.0",
    "ngx-tags-input": "^2.0.1",
    "pannellum": "^2.5.6",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler": "~9.1.6",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    "@capacitor/cli": "2.4.0",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-advanced-http": {},
      "cordova-plugin-ionic-webview": {}
    },
    "platforms": [
      "ios"
    ]
  }
}

my service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { HTTP } from '@ionic-native/http/ngx';
import { from } from 'rxjs';

export class User {
  id: string;
  name: string;
  email: string;
  password: number;
  auth_token: string;
}
@Injectable({
  providedIn: 'root',
})
export class RemoteDataService {
  base_path = 'https://####/public/index.php/';
  dev_path = 'https://####/public_html/public/index.php/';
  httpHeader = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  };
  url = 'assets/data/';
  constructor(public http: HttpClient, public nativeHttp: HTTP) {}

  POST(slug: any, user: any): Observable<any> {
    // return from(
    //   this.nativeHttp
    //     .sendRequest(this.dev_path + slug, {
    //       method: 'post',
    //       data: user,
    //       headers: {
    //         'Access-Control-Allow-Origin': '*',
    //         'Content-Type': 'application/json',
    //       },
    //       timeout: 5000,
    //     })
    //     .then(
    //       res => {
    //         console.log('data-->', JSON.parse(res.data));
    //         alert(JSON.stringify(res));
    //         return JSON.parse(res.data);
    //       },
    //       res => console.log('result/' + slug, res)
    //     )
    // );
    return this.http
      .post<User>(this.dev_path + slug, user, this.httpHeader)
      .pipe(catchError(this.handleError<User>('Add user')));
  }
2 Likes

Hey @khaled_veto it happen to me the same.

Did you find the solution? Can you share how to fix it, please?

Thanks! :slight_smile:

  • Are you using https endpoints? If not, does the problem persist when doing so?
  • Are you absolutely positively certain that the server is providing a proper SSL certificate? If you aren’t sure, please post the actual URL you are using (no redaction, or else nobody else can help you check)

Hi @rapropos,

Yes, I’m using https for the server. The server is returning rightly the data sometimes. For example, when the app is loaded the first I do is to call the https://API_URL/up… and I get information, it means there is communication with the server and the https is running (for this endpoint and for many more).

But when I call a service from some page the call is supposedly done, but I get the response… and I see the logs of my hosting and seems like nobody called any service.

Conclusion is like the app is caching, I don’t know if I should include some headers for some calls… I don’t understand.

Can you provide public access to enough code to reproduce the problem?

I solved server side

This configuration doesn’t work

Header Set Access-Control-Allow-Headers "*"

I need to set a list of header fields allowed

Header Set Access-Control-Allow-Headers "Content-Type,Access-Control-Allow-Headers,lang"

It did not work, do you have any other solution, please let us know.

If you’re going to necromance an old thread like this, here are some things you can do to drastically improve the odds of getting useful assistance:

  1. Explain precisely why you chose this thread. Describe each specific aspect of your situation that you believe is identical to that which OP reported. Provide as much fine detail as you can:

BAD: my app doesn’t run on iOS either
GOOD: I am using HttpClient and also getting inexplicable errors with status code of 0 that only present on device. The code works in a desktop browser.

  1. Take the time to go through all suggestions and information requests that were presented to OP.

For example, answer the previously posted questions about https endpoints and server SSL certs.

  1. Explain in as much detail as possible what happened when you tried things that were presented as solutions by others reporting similar problems.

For example, @khaled_veto reported having to change some server parameters. What happens when you do what they did? If that was impossible for some reason, explain the reason.

You probably see a thread here - specificity, not vague generalities. “It didn’t work”, “any other solutions?”, “me too” do not give anybody much of anything to work with.

Help us help you.

Try to add header using http set header method
this.nativeHttp.setHeader(‘Content-Type’,‘application/json’);