いいえ 'アクセス制御 - 許可 - 起源' ヘッダは、要求されたリソース上に存在する - [いいえ] - アンギュラ4

Question

DataService.ts

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class DataService { 
    result:any; 
    constructor(private _http: HttpClient) { } 
    getPrices() { 
    return 
    this._http.get('https://www.cryptocompare.com/api/data/coinlist/') 
     .map(result => this.result = result); 
    } 
} 

AppComponent.ts

import { Component } from '@angular/core'; 
import { DataService } from './data.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    objectKeys = Object.keys; 
    cryptos: any; 

    constructor(private _data: DataService) {} 

    ngOnInit() { 
    this._data.getPrices() 
     .subscribe(res => { 
     this.cryptos = res; 
     console.log(res); 
     }); 
    } 

} 

では私が取得しています「Access-Control-Allow-Origin」ヘッダーは、要求されたリソース上に存在します。このRest API URLにアクセスしようとするとエラーが発生します。

Answer 1

上記API https://www.cryptocompare.com/api/data/coinlist/は、クロス・オリジン・アクセスをサポートしていません。他のドメインからアクセスすることはできません。あなたは、サーバーがそれらからデータを取り出すことができ、代替としてhttps://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

：で

もっと読みます。 APIのStartUp.csファイルで

Answer 2

プロジェクトは

ConfigureServices(IServiceCollection services) add below code 
    services.AddCors(options => 
      { 
       options.AddPolicy("AllowSpecificOrigin", 
        builder => builder.WithOrigins("hereaddangularprojecturl")); 
      }); 


and then Configure(IApplicationBuilder app, IHostingEnvironment env) 
add below line of code 

app.UseCors("AllowSpecificOrigin");