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?

Solution 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)

Solution 2

In our case, we were able to solve the problem by adding additional http header information when making an OPTIONS preflight request from our API. It appears that Safari does not like wild cards entries in CORS requests, and additionally, needs every header specified in the Access-Control-Allow-Header value, even 'standard' ones that would not be necessary in other browsers. By adding the following headers to all preflight requests, we were able to get X-Domain requests between our site and our api working again.

  <!-- headers for preflight CORS response-->
<add key="Access-Control-Allow-Origin" value="<exact name of site>" />
    <add key="Access-Control-Allow-Methods" value="POST, GET, OPTIONS, DELETE" />
    <add key="Access-Control-Allow-Credentials" value="true" />
    <add key="Access-Control-Allow-Headers" value="Accept,Origin,Content-Type,X-LS-CORS-Template,X-LS-Auth-Token,X-LS-Auth-User-Token,Content-Type,X-LS-Sync-Result,X-LS-Sequence,token" />

Solution 3

iOS 11 has introduced some new tracking protection which block some sites/URL

You can disable this in Settings -> Safari -> Prevent Cross-Site Tracking.

Maybe that is your problem ?

I have the same problem, this works - but I would like a way about without our users have to do this.

source: https://www.macrumors.com/how-to/safari-ios-11-tracking-prevention/

Solution 4

I faced the same issue.

The problem in my case was that nginx was not letting the file upload go because the body was too large and nginx did not let that request pass to the application and just killed the connection. I changed the client_body_max_size 10M and it just worked. Look into your nginx error log!

Took me about whole day to figure out.

View more solutions