Angular Разрешить перекрестные запросы происхождения

Question

Я выполняю Angular 9 проект, подключенный к Firebase.

У меня проблемы с CORS, у меня 2 сценария ios:

1. Запрос изображения URL из моей базы данных пожарного магазина

ERROR: Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com .... from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. Доступ к Fixer.io api

Служба валют

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class CurrencyService {
    constructor(private http: HttpClient) {}
    async loadCurrencies(): Promise<any> {
        var response = this.http.get("http://api.fixer.io/api/latest");
        response.subscribe((currencies) => {
            console.log(currencies);
        });
    }
}

ERROR: Access to XMLHttpRequest at 'http://api.fixer.io/api/latest' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

РЕШЕНИЯ

***** 1. Настроить прокси *****

proxy.config.json
{
  "/api/*": {
      "target": "http://localhost:3000",
      "secure": false,
      "logLevel": "debug"
  }
}

Added the following to angular.json
"serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
            options": {
            "browserTarget": "fuse:build",
            "proxyConfig": "src/proxy.conf.json"
          },

******* 2. Установлено Google Chrome расширение CORS Unblock *******

Answer 1

Это не проблема с вашим приложением Angular ... Это проблема с приложением Firebase

политика CORS предназначена для блокировки запросов от доменов, на которые сервер не указан для отправки ответов ... поэтому, чтобы получить ответ от сервера, вы должны указать серверу разрешить ответы от вашего локального сервера. Обычно мы просто разрешаем все серверы, но в узле, например в firebase, есть библиотека, которую вы можете использовать для очень простой настройки CORS для вашего приложения firebase.

https://www.npmjs.com/package/cors

Надеюсь, это поможет ...