CORS работает в Chrome, но не в Safari или на устройстве iOS

#ionic4

Вопрос:

CORS работает в Chrome, но не в Safari или на устройстве iOS (приложение IONIC) я попытался добавить некоторые заголовки в свой запрос, но безрезультатно

         'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
        'Accept': 'application/json',
        'content-type': 'application/json'

Я также пытался отключить ограничение ПЕРЕКРЕСТНОГО происхождения в Safari, оно работало хорошо, но не на симуляторе или устройстве IOS

Итак, как это исправить?

1. «я пытался добавить некоторые заголовки в свои запросы» — вам нужно добавить эти заголовки в ответ, а не в запрос!

2. добавить заголовок в веб-api или службу, отсутствующую в приложении

3. На самом деле я стараюсь больше не устанавливать плагины, поэтому я пытался добавлять каждую вещь везде в отчаянной попытке больше ничего не устанавливать, но я думаю, что попробую собственный HTTP, как сказал @KhurshidAnsari

4. встроенный плагин работает идеально, потому что я его использую.

Ответ №1:

Ионные приложения (android, ios и ionic serve) работают на локальном хосте. По умолчанию веб-api не разрешает запросы от другого источника.

Итак, у вас есть 3 варианта :

Разрешить перекрестный запрос источника в веб-api / сервере.
Настройка прокси в приложении ionic ссылка. Я пробовал, это работало в Android, а не в ios.
Используйте встроенную http-ссылку ionic (рекомендуется), она разрешится в обоих.

Ответ №2:

Вы можете добавить следующий код в внутренний код вашего приложения. заголовок (‘Access-Control-Allow-Origin: *’); Надеюсь, это вам поможет.

Ответ №3:

Недавно у меня возникла такая же проблема, но я решил ее, используя cordova-plugin-advanced-http для устройств Android и ios.

Установить

 ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http

Использование

 import { HTTP } from '@ionic-native/http/ngx';

constructor(private http: HTTP) {}

...

this.http.get('http://ionic.io', {}, {})
  .then(data => {

    console.log(data.status);
    console.log(data.data); // data received by server
    console.log(data.headers);

  })
  .catch(error => {

    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);

  });

Подробнее: смотрите официальную ссылку

Ответ №4:

Я сделал это, добавив Access-Control-Allow-Headers:"*" и заменив * своими пользовательскими заголовками в конфигурации на стороне сервера