Проблемы с CORS в Angular 8 REST API

Question

У меня есть 2 компонента:

Мой первый компонент "CurrenciesComponent" загружается

@Component({
  selector: 'app-currencies',
  templateUrl: './currencies.component.html',
  styleUrls: ['./currencies.component.css'],
  providers: [ CryptoCurrencyService ]
})
export class CurrenciesComponent implements OnInit {
  currency: CryptoCurrency;
  currencies: Array <CryptoCurrency> = [];

  // dependency injection
  constructor(private cryptoCurrencyService: CryptoCurrencyService ) { }

  ngOnInit() {
    this.cryptoCurrencyService.getAll().subscribe(res => {
      this.currencies = res;
    });
  }
}

В файле html я передаю массив валют:

<app-currency
    *ngFor="let currency of currencies"
    [currency] = "currency"

>

В дочернем компоненте я получаю валюту @Input (): CryptoCurrency. Теперь моя проблема в том, что этот объект, переданный дочернему компоненту, используется для вызова службы.

@Component({
  selector: 'app-currency',
  templateUrl: './currency.component.html',
  styleUrls: ['./currency.component.css']
})
export class CurrencyComponent implements OnInit {
  @Input() currency: CryptoCurrency;
  basicCurrencyExchange: BasicCurrencyExchange;

  constructor(private cryptoCurrencyService: CryptoCurrencyService) { }

  ngOnInit() {
    this.cryptoCurrencyService.getCrypto(this.currency).subscribe(res => {
      this.basicCurrencyExchange = res;

    })
  }
}

Я создал модель (BasicCurrencyExchange) с 3 параметрами: eur, uds, yen

export class BasicCurrencyExchange {
  constructor(private _usd: string, private _jpy: string, private _eur: string) {
  }
  ... getters + setters
}

В сервисе я вызываю этот метод:

getCrypto(currency: CryptoCurrency) {
  var header = {
    headers: new HttpHeaders({
      'Apikey': 'myApiKeyValue',
      'Access-Control-Allow-Origin': '*'
      })
  };
  return this.http.get<BasicCurrencyExchange>(this.baseUrlCrypto + "/price?fsym=" + currency.symbol + "&tsyms=USD,JPY,EUR", header);
}

По причине, по которой я не понимаю, я не возвращаю ожидаемые значения в файле HTLM.

У меня есть 2 ошибки:

1. Доступ к XMLHttpRequest в 'https://min-api.cryptocompare.com/data/price?fsym=btc&tsyms=USD, JPY, EUR ' из источника 'http://localhost: 4200 'было заблокировано политикой CORS: Access-Control-Allow-Headers в заголовке запроса не разрешает поле access-control-allow-origin.
2. ERROR TypeError: Невозможно прочитать свойство' eur 'неопределенного, тогда как это свойство существует в возвращаемом объекте

Ожидаемый возвращаемый объект должен быть следующим:

USD: 8655,82 JPY: 953412,95 EUR: 7822,62

Answer 1

Как отметили JB Nizet, Mi c и Nicolas: 1 / Контроль доступа был бесполезен 2 / Я не заметил, что он "чувствителен к регистру". В HTML я звонил {{basicCurrencyExchange.usd}} вместо {{basicCurrencyExchange.USD}}

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

return new Promise(resolve => {
  this.cryptoCurrencyService.getCrypto(this.currency)
    .subscribe(res => {
      this.basicCurrencyExchange = res;
      console.log(this.basicCurrencyExchange);
      resolve(this.basicCurrencyExchange);
  });
})

Теперь я могу отображать значения, но у меня все еще есть неопределенное сообщение об ошибке ...