Ionic 4 iOS 应用程序对 API 的请求引发未知错误，状态 0

Question

I have a Ionic 4 with Angular app which connects to my API. On Android / Browser the calls to the API are working (no errors on the console). However on iOS I sometimes get an error "status":0,"statusText": "Unknown Error"

ERROR: {
"headers":{"normalizedNames":{},
"lazyUpdate":null,
"headers":{}},
"status":0,
"statusText": "Unknown Error",
"url":"https://api.domain.com/v2/profile",
"ok":false,
"name":"HttpErrorResponse",
"message":"Http failure response for https://api.domain.com/v2/profile: 0 Unknown Error",
"error":{"isTrusted":true}}

the weird thing is, this is not happening all the time.

scenario:

1. Angular httpClient GET call to https://api.domain.com/v2/profile => Works, getting data back
2. Another GET call (navigation occured) to https://api.domain.com/v2/list => Works
3. Going back to previous page a new GET call to https://api.domain.com/v2/profile fails and throws above error.

It doesn't matter how many times you navigate, it randomly throws the above error. If it had anything to do with CORS I assume it would throw the error everytime you do a request on iOS.

Ionic info

Ionic:

   Ionic CLI                     : 5.2.7 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.8.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.3.2
   @angular/cli                  : 8.3.2
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 10 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   ios-sim : 8.0.2
   NodeJS  : v10.16.3 (/usr/local/bin/node)
   npm     : 6.9.0
   OS      : macOS Mojave
   Xcode   : Xcode 10.2.1 Build version 10E1001

Safari console screenshot: https://imgur.com/a/BNXAB7Y

Answer 1

This answer allows me to find the answer Preflight response is not successful with proper headers

The ionic's FAQ helps to understand https://ionicframework.com/docs/faq/cors .

For me, this Apache's configuration works done in virtual host conf:

# Always set these headers.
#you can restrict the domain to allow here
SetEnvIf Origin "^(.*)$" AccessControlAllowOrigin=$0
Header always set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

# Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]