False CORS failure only in iOS mobile safari when uploading images

Question

I'm running into a strange error on mobile Safari with my iPhone 6 on iOS 11.3.1 and in the iOS simulator.

I have an Ionic application (PWA, not Cordova) that has been working just fine for months with a backend API built with Laravel (PHP). I have CORS configured on it and it works fine.

I've just tried to implement a new feature where I upload an image and it breaks only on mobile Safari.

I see the OPTIONS request go through and it looks correct. In fact, the request/response look identical except for the User-Agent from desktop Safari which works.

On desktop Safari this is followed up by a POST which succeeds.

On mobile Safari the POST does not even attempt to go out, instead, I get a message Failed to load resource: Origin https://upload.geekity.com is not allowed by Access-Control-Allow-Origin. despite the OPTIONS request returning https://upload.geekity.com for Access-Control-Allow-Origin.

Here are screenshots of web inspector for both OPTIONS and POST on desktop and mobile safari.

You can look at the source here: image-upload.

I really have no idea what could be happening here to make this fail in this way.

Answer 1

You're right, the CORS error message is very misleading. I've been struggling with the exact same issue for the past couple of days and it turned out the image I was trying to upload from my phone was too large for the app server I'm using which is nginx on Kubernetes; so the fix which works for me is to just add this annotation to the ingress configuration

nginx.ingress.kubernetes.io/proxy-body-size: "0"

to removes any restriction on upload size.