CORS выпуск в ionic4

Question

Я использую Angularfire 2 и вызываю функцию облака из моего приложения ionic 4. Как решить следующую проблему CORS в ionic 4 ??

Доступ к выборке в 'https://null -myionicshop-693bc.cloudfunctions.net/subscribeToTopic 'from origin' http://localhost:8100' заблокирован политикой CORS: Ответ на предварительный запрос не проходит проверку контроля доступа: нет заголовка 'Access-Control-Allow-Origin'присутствует на запрашиваемом ресурсе.Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

Answer 1

Я сегодня нашел такие ошибки и решил.Мой проект был ionic 4 и backend express с машинописным шрифтом.

Ошибка состояла в том, что в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Я решил в Express.Я прикрепил следующие строки в «заголовке» бэкэнда запроса.

this.app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
      next();
    });

Как и эти строки.

const whitelist = [
      'http://localhost:8000',
      'capacitor://localhost',
      'ionic://localhost',
      'http://localhost',
      'http://localhost:8080',
      'http://localhost:8100',
    ];
    const corsOptions = {
      origin: (origin: any, callback: any) => {
        console.log(origin);
        if (whitelist.indexOf(origin) !== -1) {
          callback(null, true);
        } else {
          callback(new Error('Not allowed by CORS'));
        }
      },
      preflightContinue: true,
      credentials: true,
    };
    // Enable preflight requests for all routes
    this.app.options('*', cors(corsOptions));

Я думаю, что ваша проблема была похожа на эти.Спасибо за чтение моего предложения.

Answer 2

Я думаю, вы должны проверить ваши ионные журналы, которые находятся в ~ / .ionic / helper.log, в моем случае моя ошибка была:

[ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find module '@ionic/angular-toolkit/package'

Итак, я установил пакет "@ ionic /angular-toolkit / package ", а затем я настроил свой angular.json:

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "app:build",
        "proxyConfig": "proxy.conf.json"
      },

И тогда все заработало отлично. Поэтому я рекомендую ... проверить ваши ионные журналы

Answer 3

Уважаемый, у меня была такая же ошибка, когда я пытаюсь POST с помощью Httpclient Angular 7 в ionic 4, после того, как я добавлю ссылку ниже, перед api url у меня это сработало.https://cors -anywhere.herokuapp.com /

Пример: https://cors -anywhere.herokuapp.com / http://something.com/api/details.php

И при запуске API на локальном хосте.Следуйте ниже,

1-Запустите "Cmd" от имени администратора

2- "C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" --disable-web-security --disable-gpu --user-data-dir = ~ / chromeTemp

запустить это на cmd.Новая сессия Chrome запустится автоматически.Запустите ионный проект здесь.

Answer 4

CORS является проблемой только тогда, когда мы запускаем или тестируем наше приложение при запуске ionic serve или ionic run -l.

Существует два способа решения проблемы: первое и более простое решениеэто просто разрешить все источники из вашей конечной точки API.

Во-вторых, вы можете сделать это с помощью прокси-сервера.Допустим, мы хотим получить доступ к https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic, что не позволяет нашему происхождению от localhost.

Настройки прокси содержат две вещи: путь, который вы используете для доступа к ним на вашем локальном Ionic сервере, и proxyUrl you 'В конечном счете, я хотел бы получить доступ от вызова API.

Настройте свой файл ionic.project следующим образом:

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/subscribeToTopic",
      "proxyUrl": "https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic"
    }
  ]
}

Как мы указали выше, при доступе к ионному серверу напуть http://localhost:8100/api, он будет отправлять запросы прокси на https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic от вашего имени.

Таким образом, CORS не требуется.

Надеюсь, это поможет!Спасибо