iOS11 causing CORS Issues in all mobile browsers

Question

We were testing our website on iOS devices with iOS11, and noticed that it was breaking, as the browser would not accept responses from our API. Using the remote debugger, we were able to determine that we were getting a CORS permission error, and the response body and HTTP Headers were being stripped. This seemed to be occurring on all mobile iOS browsers (Chrome/Safari), and continued to occur even after I changed the CORS response header to a wildcard value. However, every other browser/OS/version of iOS is working perfectly. I have attached the network response from our API, the response headers for our API, and the error we are getting from the console.

Is there something about iOS11 that might be causing this, or failing that, is there any way I can get further diagnostics?

Answer 1

We had a similar situation with a form hosted on domain A and posting the data to an API on domain B. The POST request from domain A contained the header "x-api-key" that is not relevant for domain B

The response to the preflight OPTIONS request to the API contained the headers

• Access-Control-Allow-Origin:https://domainA
• Access-Control-Allow-Headers:*
• Access-Control-Allow-Methods:*

That worked fine for all browsers except those on iOS. As we finally found out, specifying the wild card * for Access-Control-Allow-Headers does not work for iOS browsers. In the response to the OPTIONS request you need to specify all the headers that are present in the POST request, even if some headers are not relevant for the server on domain B. Only then will iOS send the POST request.

Changing the response header to

• Access-Control-Allow-Headers:Accept,Content-Type,X-Requested-With,x-api-key

did it (even if the header x-api-key is not processed on server B)