[iOS 12 Beta] Preflight requests fail

Ionic Framework ionic-v3
21

See my comment, it’s solved

22

Thanks, and much appreciated :slight_smile:

23

One follow up question. Do you need the latest Xcode or is it the new beta of iOS that resolves the issue?

24

As far as I heard, the bug was in Webkit, so I guess the problem was in iOS itself

25

Cool thanks for the update :slight_smile:

1 Like
26

Describe the Bug:-

We, I and other Ignites, noticed that https requests on iOS v12 are failing respectively never reach our backends. Some are facing preflight error or typical CORS errors but in any case, requests aren’t reaching our backend.

When it comes to me, I could confirm that my app is productive and the fact that this error only occurs on iOS >= v12

Errors

In Xcode 10 Beta I get the following error:

{“headers”:{“normalizedNames”:{},“lazyUpdate”:null,“headers”:{}},“status”:0,“statusText”:“Unknown Error”,“url”:null,“ok”:false,“name”:“HttpErrorResponse”,“message”:“Http failure response for (unknown url): 0 Unknown Error”,“error”:{“isTrusted”:true}}

I added so much log I could on my backend API side, unfortunately, nothing was parsed, it looks like nothin reach it

Report

I have reported my problem to Apple too. Can’t tell if it’s an iOS v12 bug or an improvement which should be developed in the WkWebView plugin in order to be compatible for v12, therefore I allowed my self to open this issue

Other resources:-

Discussion on the Ionic forum: [iOS 12 Beta] Preflight requests fail - #9 by reedrichards

Open radar about a similaire issue: rdar://40807782: iOS 12.0 Beta 1 WKWebview cross origin requests fail - Preflight response is not successful

Stackoverflow: angular - iOS v12 Https requests errors - Stack Overflow
Version

cordova-plugin-ionic-webview: 1.2.1
ionic-angular: 3.9.2
angular/http: 5.0.0
node: 10.2.1

I set the following headers in my backend, which like I said, works find till iOS < v12

var allowedOrigins = ["https://example.com", "http://ionic.local", "http://localhost:8080"];

 var origin = req.headers.origin;
 if(allowedOrigins.indexOf(origin) > -1){
        res.setHeader('Access-Control-Allow-Origin', origin);
 } else {
        res.setHeader("Access-Control-Allow-Origin", "https://example.com");
    }

 res.header("Access-Control-Allow-Credentials", "true") 
 res.header("Access-Control-Allow-Headers", "Origin, Authorization, Content-Type, Content-Range, Content-Disposition, Content-Description, X-Requested-With, X-ACCESS_TOKEN");
 res.header("Access-Control-Allow-Methods", "GET,PUT,POST");
27

This issue happened due to the WKWebView Mostly

So, the very simple way to use the WKWebView in Ionic is that You Must uninstall the previously installed UIWebView from the plugin by running the following command.

  • ionic cordova plugin remove cordova-plugin-ionic-webview

After that try to add the WKWebView Plugin with this command

  • ionic cordova plugin add cordova-plugin-wkwebview-engine

When the WkWebView plugin is installed the very next thing is to add the following lines in the config.xml file

feature name=“CDVWKWebViewEngine”

param name=“ios-package” value=“CDVWKWebViewEngine”

feature

preference name=“CordovaWebViewEngine” value=“CDVWKWebViewEngine”

preference name=“WKWebViewOnly” value=“true”

After doing all that when you try to run the application and hit some api call you will get the preflight issue in that due to CORS so to fix that. Simply run the following command

  • ionic cordova plugin add cordova-plugin-wkwebviewxhrfix

After adding the above plugin the CORS issue will be resolved

Thanks,
Happy Coding