Как решить проблему с политикой CORS в приложении Ioni c Angular?

Question

Я пытаюсь выполнить приведенную ниже функцию в моем приложении Ioni c Angular, cloudFunctionUrl - это облачная функция, которая есть в моем проекте Firebase:

import { HttpClient } from '@angular/common/http';
private http: HttpClient

like(post) {
this.http.post('cloudFunctionUrl', JSON.stringify(body), {
      responseType: 'text'
    }).subscribe((data) => {
      console.log(data);
    }, (error) => {
      console.log(error);
    });
}

Чтобы преодолеть проблему CORS , я установил плагин Allow CORS: Access-Control-Allow-Origin chrome. Ниже приведен список доменов из белого списка:

• http://localhost: 8100
• chrome .google.com
• localhost
• localhost: 8100
• localhost: 8100 / profile
• cloudFunctionUrl

Вышеуказанная функция like выполняется для localhost:8100/profile.

У меня возникают две проблемы:

1. Я перехожу на localhost: 8100 / profile без проблем, но когда я выполняю like, я получаю это сообщение об ошибке :

Доступ к XMLHttpRequest в 'cloudFunctionUrl' из источника 'http://localhost: 8100 ' заблокирован политикой CORS: Нет 'Access-Control-Allow- Заголовок источника 'присутствует на запрашиваемом ресурсе.

Если я go подключился к консоли Firebase и у меня включен плагин CORS, он говорит «Произошла ошибка при загрузке ваших проектов»

Может кто-нибудь сказать мне, как я могу решить эту проблему?

Я также пытался добавить в запрос нижеследующие заголовки, но ошибка все еще появляется:

let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });
    this.http.post('cloudFunctionUrl', JSON.stringify(body), {
      headers: headers,
      responseType: 'text'
    }

Answer 1

Вы пытаетесь выполнить cloudFunctionUrl (облачная функция) из вашего приложения Ioni c Angular.

Я также пытался добавить в запрос приведенные ниже заголовки, но ошибка все еще появляется

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

let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*'
    });

Ваша облачная функция должна поддерживать запросы CORS от вашего Angular Приложение, node.js пример:

/**
 * HTTP function that supports CORS requests.
 *
 * @param {Object} req Cloud Function request context.
 * @param {Object} res Cloud Function response context.
 */
exports.corsEnabledFunction = (req, res) => {
  // Set CORS headers for preflight requests
  // Allows GETs from any origin with the Content-Type header
  // and caches preflight response for 3600s

  res.set('Access-Control-Allow-Origin', '*');

  if (req.method === 'OPTIONS') {
    // Send response to OPTIONS requests
    res.set('Access-Control-Allow-Methods', 'GET');
    res.set('Access-Control-Allow-Headers', 'Content-Type');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
  } else {
    res.send('Hello World!');
  }
};

Обработка запросов CORS

Answer 2

В документации Обработка запросов CORS объясняется, что:

Обмен ресурсами между источниками (CORS) - это способ предоставления приложениям, работающим в одном домене, доступа к контенту из другого домена, например, разрешив yourdomain.com отправлять запросы на region-project.cloudfunctions.net/yourfunction.

В этой документации вы можете получить дополнительные разъяснения по использованию CORS в облачных функциях.

Обычно добавление приведенного ниже кода помогает использовать CORS в Firebase - согласно этому сообщению в Сообществе здесь указывает.

const cors = require('cors')({origin: true});

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

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

• Функции Google Cloud Включают CORS?
• Включить Cors в облачной функции Firebase
• Невозможно выполнить локальное тестирование с использованием firebase из-за ограничения CORS

Дайте мне знать, помогла ли информация вы!