How to fix iOS 12 Safari Cors preflight error?

I am trying to understand CORs a little better as several users of our web app are complaining since they upgraded to iOS 12 they are receiving preflight errors.

The errors from the web inspector

[Error] Preflight response is not successful
[Error] Fetch API cannot load https://www.api.com due to access control checks.
[Error] Failed to load resource: Preflight response is not successful (v4, line 0)

The client app is a React app with Apollo. It calls a server over HTTPS with Apache HTTPD and Express JS.

Everything works fine on all other browsers, this is isolated to iOS 12.

Whats weird is when I look through the HTTPD access logs, I can't see any preflight calls. When I try hit the server directly (on iOS 12), I see both the preflight OPTIONS request and POST in the logs. But when calling the server through the web app, the CORs preflight fails.

In the express app, I also logged out all requests, and it doesn't appear there either.

In HTTPD I have the settings of

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS

In express I have the same thing.

Any ideas?!


It's a bug in iOSv12, but it's already fixed in iOSv12.1 beta (16B5059d), assuming the current beta code makes it into production.

The problem is that iOSv12 WebKit preflight OPTIONS calls don't leave the device. I've run WireShark and the iOSv12 simulator to confirm this.


If it says Header not allowed in "Access-Control-Allow-Headers", You can fix it by adding the specific Header from the server side, where you send "Access-Control-Allow-Headers". because wildcard is not working i.e “Access-Control-Allow-Headers”: “*"

It should be “Access-Control-Allow-Headers”: “*, Accept, Content-Type, Content-Length, Accept-Encoding, CUSTOM-ALLOWED-HEADER”