9

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.

Andrew Shell
  • 810
  • 1
  • 8
  • 15
  • 1
    Try adding "Origin" in your "Access-Control-Allow-Headers" response header in your OPTIONS response.(Access-Control-Allow-Headers: ORIGIN, AUTHORISATION) https://stackoverflow.com/questions/16824661/cors-request-not-working-in-safari – Jannes Botis May 10 '18 at 20:41
  • Does it happen with smaller images? – David May 11 '18 at 09:57
  • Yes, it happens with small images as well. In fact, the request works fine if I comment out the line of code that attaches the image to the request. – Andrew Shell May 15 '18 at 17:16
  • Did you find a solution? I've the same problem. – Kargpfen Aug 29 '18 at 08:25
  • Unfortunately no, I haven't found a solution yet. We just moved on without that feature for now. – Andrew Shell Aug 29 '18 at 14:26

4 Answers4

2

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

MesfinMoges
  • 128
  • 1
  • 1
  • 10
1

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"
keval nayak
  • 254
  • 1
  • 2
  • 11
  • This didn't change anything. I'm using the `barryvdh/laravel-cors` library for the API and it's set to return any headers that are requested. `authorization` is the only header listed in the OPTIONS Access-Control-Request-Headers request, so that's why it was the only one returned before. – Andrew Shell May 15 '18 at 17:20
0

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.

heroin
  • 2,148
  • 1
  • 23
  • 32
0

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

Parth Godhani
  • 209
  • 3
  • 18