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, w

Answer 1

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/

Answer 2

For the react app , I removed form default submission then it started working in IOS as well. Not sure about internals. I used OnClick for button instead of type="Submit".

Answer 3

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" />

Answer 4

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)

Answer 5

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.