角度2エラーのHttp

Question

私は外部のページからデータベースからデータを読み取るしようとしています：

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/throw'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class Ganado2Service { 

    private url: string = 'http://bicicardpruebas.itcl.es/prodwservice/api/instalacion' 

    constructor(private http: Http) { } 

    getCiudad(id: string): Observable<String> { 
     let ciudad: String = null; 
     return this.http.get(this.url + '/' + id) 
      .map(response => { 
       let dbCiudad: any = response.json(); 
       ciudad = dbCiudad.id; 
       return ciudad; 
      }) 
      .catch(this.handleError); 
    } 

    handleError(error: any) { 
     let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 
} 

：

「http://bicicardpruebas.itcl.es/prodwservice/api/instalacion/1」

を私はこれを持っているサービスを持っています

私はこれを持つコンポーネントを持っています：

import { Component, OnInit } from '@angular/core'; 
import { BaMenuService } from '../../theme'; 

import {Ganado2Service} from './ganado2/ganado2.service' 

@Component({ 
    selector: 'ganado', 
    templateUrl: './ganado.component.html', 
    styleUrls: ['./ganado.scss'] 
}) 
export class GanadoComponent implements OnInit { 

    constructor(private ganadoService: Ganado2Service) { } 

    ngOnInit() { 
     this.ganadoService.getCiudad("1").subscribe(ciudad => console.log(ciudad)); 
    } 

} 

Wh jaコンソールで実行します。次のエラーが表示されます。

ロードに失敗しました。http://bicicardpruebas.itcl.es/prodwservice/api/instalacion/1：要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。 Origin 'http://localhost:4200'はアクセスできません。

何が問題なのですか？

Answer 1

要求されたURLは、クロスオリジン要求を許可していません。つまり、同じドメインのページだけがそのURLをリクエストできます。そのため、ブラウザがブラウザを停止します。 cliを使用している場合、これを使用してローカルプロキシを作成できます。 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md。