Question

早上好，我试图从外部页面读取数据库中的数据：

＆＃39; http://bicicardpruebas.itcl.es/prodwservice/api/instalacion/1＆＃39;

我有一个服务：

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);
    }
}

我有一个组件：

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));
    }

}

当我在控制台上运行它时，我收到以下错误：

无法加载http://bicicardpruebas.itcl.es/prodwservice/api/instalacion/1：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:4200＆＃39;因此不允许访问。

可能是什么问题？

Answer 1

请求的网址不允许交叉来源请求。这意味着只有来自同一域的页面才能向该URL发出请求。因此，您的浏览器会停止它。如果您使用cli，则可以使用它来创建本地代理。 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md。

Angular 2 Error Http

1 个答案: