IOS WKWebView CORS problems

Hi all!

I don’t have any problems with Android (as usual with Ionic my problems are always iOS related) but I cannot fetch data from my API (which has CORS enabled on the server - I own the server) due to CORS restrictions.

From what I have been reading it was supposed to be fixed but it is not. I really would like to use WKWebView (my RAM consumption goes from 200Mb with UIWebView to 50Mb with WKWebView) but as it is now, I simply can’t because my app in iOS doesn’t work. I spent some time lost because I didn’t know what was causing the issue and as soon as I went back to UiWebView everything started working again.

Anyone has any ideias? Thanks in advance

Hi @XFrEaK,

WKWebview on ios doesn’t allow to make cross-domain requests unless server returns correct Access-Control-Allow-Origin header. It might be a problem if you don’t have control over the server. Luckily, cordova-plugin-http exists https://ionicframework.com/docs/native/http/. The problem it will not work in browser since cordova environment needed, which makes development/debugging process unbearable. To make development/debugging process simpler, I created this wrapper on top of Native-HTTP: https://github.com/sneas/ionic-native-http-connection-backend. With the library above you can keep using Angular’s Http service as is. The library will automatically decide whether to use XMLHttpRequest or cordova-plugin-http to perform requests. Even though it is quite new and immature, It works perfectly on the big project I’m working on right now and we’re already using it in production. I hope it will help you. Please feel free to file an issue if you experience any troubles using it.

1 Like

Oops, my bad, I didn’t notice you own the server. As I mentioned above, you have to make sure your server returns Access-Control-Allow-Origin: * header.

Thats the problem I have tried a lot of different CORS configurations but i either get the “i cannot use the wildcard when credentials are required (although I force them to be false” error or the “null origin not allowed” one)

Also I think I had already tried your plugin with no luck too. This is a iOS only problem, don’t know if this even makes sense

Apparently you’re unable to setup Access-Control-Allow-Origin: * on your server, which would be the easiest (less secure though) solution. This header is mandatory for XMLHttpRequest under WKWebView + iOS.

I am not unable…I have it enabled:

image

But when acessing the same endpoint with iOS and WKWebView installed I have this error: “Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true”. As seen in the image above the CORS is enabled and the Credentials flag is not set.

I am in the same situation!! Driving me nuts. Done everything possible CORS related. Android devices are fine. ONLY IOS and it looks like it is WKwebview related.

Anyone find a fix?

Hi Sneas,

i have the same problem. My ionioc project use WKWebView and one thirdpart node_js module. Everything works on browser and android but not ios on device. The NodeJS Module use XHRRequest for contacting the API. I cant change cors settings on Server. When i downgrade to UIWebview that works.

My Question: can i use your …connection-backend for this problem? I test it but thats not working ;-(

Thank you in advance!

Hi @seyas. You’re welcome to use the lib. I don’t know what you mean by “NodeJS Module”. But usually library isn’t working properly because cordova-plugin-advanced-http is not installed/recognized. Please refer to the troubleshooting section of documentation https://github.com/sneas/ionic-native-http-connection-backend#i-followed-the-installation-and-usage-instructions-but-still-experience-cors-issues-on-device

I have the same problem in my ionic v1 project. That ionic-native-http comes from angular2. So, it is not working ionic v1. Can you pleae help me how to sort it. If ionic-native-http works in ionic v1 means please share the related link.

Hi, it does not work with v1. You can use cordova-plugin-advanced-http.

If you need Ionic specific origins, these are mine that i use in NodeJs API.

origin: [
‘capacitor://localhost’,
‘ionic://localhost’,
http://localhost’,
http://localhost:8000’,
http://localhost:8080’,
http://localhost:8100’,
http://localhost:8200
]