CODEWITHSUNDEEP
angularionic-frameworksafariionic3mobile-safari
Andrew Shell
Andrew Shell

Reputation: 1080

False CORS failure only in iOS mobile safari when uploading images

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.

Desktop Safari OPTIONS Desktop Safari POST iOS Safari OPTIONS iOS Safari POST

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.

Upvotes: 9

Views: 2336

Answers (4)

MesfinMoges
MesfinMoges

Reputation: 138

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.

413 Request Entity Too Large

Upvotes: 3

Parth Godhani
Parth Godhani

Reputation: 239

use native http functionality to avoid this https://ionicframework.com/docs/native/http/ it will work perferctally

Upvotes: 0

keval nayak
keval nayak

Reputation: 254

for laravel-5.4.* add following line in .htaccess file

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-API-KEY, Origin, X-Requested-With, Content-Type, Accept,Authorization"

Upvotes: 1

heroin
heroin

Reputation: 2247

Try to add endpoint to your server like /api/ping. When your app starts, send at first a request to the endpoint:

http.get('/api/ping');

without authentication, then consequent requests should work.

I haven't tried the solution, but may be it will help.

Upvotes: 0

Related Questions