Ложный сбой CORS только в мобильном сафари iOS при загрузке изображений

Question

Я сталкиваюсь со странной ошибкой в ​​мобильном Safari с моим iPhone 6 на iOS 11.3.1 и в симуляторе iOS.

У меня есть приложение Ionic (PWA, а не Cordova), которое месяцами прекрасно работало с бэкэнд-API, созданным с помощью Laravel (PHP). У меня настроен CORS, и он работает нормально.

Я только что попытался реализовать новую функцию, в которой я загружаю изображение, и оно ломается только в мобильном Safari.

Я вижу, что запрос OPTIONS проходит и выглядит правильно. Фактически, запрос / ответ выглядят одинаково, за исключением User-Agent от настольного Safari, который работает.

В настольном Safari за этим следует POST, который завершается успешно.

В мобильном Safari POST даже не пытается выйти, вместо этого я получаю сообщение Failed to load resource: Origin https://upload.geekity.com is not allowed by Access-Control-Allow-Origin. несмотря на запрос OPTIONS, возвращающий https://upload.geekity.com для Access-Control-Allow-Origin.

Вот скриншоты веб-инспектора для OPTIONS и POST для настольного и мобильного сафари.

Вы можете посмотреть источник здесь: image-upload .

Я действительно понятия не имею, что здесь может произойти, чтобы это провалилось таким образом.

Answer 1

Вы правы, сообщение об ошибке CORS вводит в заблуждение. Последние пару дней я боролся с точно такой же проблемой, и оказалось, что изображение, которое я пытался загрузить со своего телефона, было слишком велико для сервера приложений, которым я пользуюсь, это nginx в Kubernetes; поэтому исправление, которое работает для меня, состоит в том, чтобы просто добавить эту аннотацию к входной конфигурации

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

для снятия любых ограничений на размер загрузки.

Answer 2

для Laravel-5.4. * добавить следующую строку в файл .htaccess

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

Answer 3

используйте встроенные функции http, чтобы избежать этого https://ionicframework.com/docs/native/http/ это будет работать безупречно

Answer 4

Попробуйте добавить конечную точку на ваш сервер, как /api/ping. Когда ваше приложение запустится, сначала отправьте запрос конечной точке:

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

без аутентификации, тогда последующие запросы должны работать.

Я не пробовал решение, но, возможно, оно поможет.