Ionic 6 Capacitor - CORS error with Ios (Safari and Iphone) but worked with Chrome and Android

Capacitor
1

Hi everyone,
During the development the application mobile using Ionic Capacitor version 6, I had the problem of CORS (Cross-Origin Resource Sharing) that happened only with Iphone (the Android app works well).
According to the article that I found from ionic.io: Handling CORS issues in Ionic - Ionic Blog, when we run the app the phone, the orgin will not exist, therefore, any request outwards will not require a CORS request.

I verify the Http.Request.Headers and found that the orgin is capacitor://localhost (not file://some/path/www/index.html) like the above article mentioned.

So, my question is how could I run my app in Iphone that will use file://some/path/www/index.html instead of capacitor://localhost to avoid the CORS error in Ios.

Regards,
Vu Pham

Information about my application:
API Server: WCF (Windows Communication Foundation)
Enabling CORS in WCF: Enabling CORS in WCF

My app information:
“dependencies”: {
“@angular/common”: “^14.2.4”,
“@angular/core”: “^14.2.4”,
“@angular/forms”: “^14.2.4”,
“@angular/platform-browser”: “^14.2.4”,
“@angular/platform-browser-dynamic”: “^14.2.4”,
“@angular/router”: “^14.2.4”,
“@capacitor/android”: “4.3.0”,
“@capacitor/app”: “4.0.1”,
“@capacitor/core”: “4.3.0”,
“@capacitor/device”: “^4.0.1”,
“@capacitor/haptics”: “4.0.1”,
“@capacitor/ios”: “4.3.0”,
“@capacitor/keyboard”: “4.0.1”,
“@capacitor/preferences”: “^4.0.1”,
“@capacitor/push-notifications”: “^4.1.2”,
“@capacitor/splash-screen”: “^4.1.3”,
“@capacitor/status-bar”: “4.0.1”,
“@ionic/angular”: “^6.2.9”,
“@ionic/storage-angular”: “^3.0.6”,
“@ngx-translate/core”: “^14.0.0”,
“@ngx-translate/http-loader”: “^7.0.0”,
“ionicons”: “^6.0.3”,
“rxjs”: “~7.5.7”,
“tslib”: “^2.4.0”,
“uuid”: “^9.0.0”,
“zone.js”: “~0.11.8”
}

2

Can you not add the following origins to your WCF server as allowed under CORS?

  • iOS: capacitor://localhost
  • Android: http://localhost
3

I put already, either
HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Origin”, “capacitor://localhost, http://localhost”) or HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Origin”, “*”)
it did not work at all.

Here is the code that enable CORS in my WCF Server
public void BeforeSendReply(ref Message reply, object correlationState)
{
HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Origin”, “capacitor://localhost, http://localhost”);
if (HttpContext.Current.Request.HttpMethod == “OPTIONS”)
{
HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Methods”, “POST, PUT, DELETE”);
HttpContext.Current.Response.AddHeader(“Access-Control-Allow-Headers”, “Content-Type, Accept”);
HttpContext.Current.Response.AddHeader(“Access-Control-Max-Age”, “1728000”);
HttpContext.Current.Response.End();
}
}

4

A couple of things. First, please use proper Markdown code blocks :slight_smile:

Maybe look at this? enable cross-origin resource sharing

Have you looked at what your app is getting back from the OPTIONS request? You can do this in Dev Tools. For an Android device, you can go here chrome://inspect/#devices to inspect. For iOS see Use the developer tools in the Develop menu in Safari on Mac - Apple Support.

5

Hi Twestrick,
I verified in my server log, the Request sent the OPTIONS methods, and the Response also had the good value. The problem according to my investigating, Safari or Iphone somehow did not recognize the result from server.

Here is the result that I got from Server when using Iphone:

Request.Headers Response.Headers
Access-Control-Request-Method OPTIONS
Access-Control-Request-Headers content-type
Origin capacitor://localhost
Access-Control-Allow-Origin *
Access-Control-Allow-Methods POST, PUT
Access-Control-Allow-Headers Content-Type, Accept

Currenly, I found the solution when call Http Post with Iphone by using Capacitor Http following the link: How to make API calls in Ionic Capacitor Apps | Enappd (medium.com)

My question is:
Is it normal to have the different about these commands?

Command Origin
ionic cap run ios capacitor://localhost
ionic run file://some/path/www/index.html

Regards,
Vu Pham

6

Yeah, using Capacitor HTTP is an option if you cannot get it working. Not sure which plugin that article used, but the new 1st party plugin by Ionic is here - Capacitor Http Plugin API | Capacitor Documentation.

ionic run is not a valid command - Ionic CLI Framework: Command-Line Interface to Develop Apps

1 Like
7

Thank you Twestrick for your response.
Before I used Angular HttpClient (it works well for Android (GET and POST methods), Iphone(GET method)) but it seems not support for POST method in Iphone
I did investigate about the CORS problem in Ionic and WCF and my solution now is applying Capacitor Http (for Ios only), but it would be difficult to maintain since I have to manage code in 2 different versions (Android and Ios).

1 Like
8

Not sure on Angular but I am pretty sure others use it w/o issue. I use Axios in my Vue app with no issues. It’s gotta be something in your configuration.

I would suggest using the 1st party Capacitor HTTP plugin I mentioned. You then don’t need to change any of you code. It intercepts the web APIs fetch and XMLHttpRequest and runs your requests through the native iOS/Android libraries circumventing any CORS restrictions.

1 Like