Question

我正在使用Angular2来创建一个简单的Web应用程序。该应用程序必须调用API来获取一些数据。

我创建了一个服务和一个组件，如官方教程中所示。

服务：

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

import 'rxjs/add/operator/toPromise';

@Injectable()
export class WeatherService {

  private url : string = 'http://127.0.0.1:1337/weather';

  constructor(private http: Http) {
    console.log('Weather URL API:', this.url);
  }

  public getWeather() {
    return  this.http
            .get(this.url)
            .toPromise()
            .then(
              (response) => {
                console.log('response:',response);
              },
              (error) => {
                console.log('Error:',error);
              }
            );
  }

}

问题是该服务总是返回错误：

错误：对象{_body：错误，状态：0，ok：false，statusText：“”，headers：Object，type：3，url：null}

但是在Mozilla Firefox开发工具中，API被调用并返回状态代码为200的JSON。

也许我犯了一个错误，但我看不出是什么，在哪里。一个想法？

Answer 1

好的，我自己找到了解决方案。问题是我的localhost API没有启用CORS。但Angular2没有返回错误，告知此事。

干净的代码：的的WeatherService

import { Injectable } from '@angular/core'; import { Headers, Http, Response } from '@angular/http'; import 'rxjs/add/operator/toPromise'; @Injectable() export class WeatherService { private url : string = 'http://127.0.0.1:1337/weather'; constructor(private http: Http) { } public getWeather() { return this.http .get(this.url) .toPromise() .then( res => res.json(), err => console.log('Error:',err) ); } }

<强> WeatherComponet ：

import { Component, OnInit } from '@angular/core'; import { WeatherService } from '../weather.service'; @Component({ selector: 'app-weather', templateUrl: './weather.component.html', styleUrls: ['./weather.component.css'], providers: [WeatherService] }) export class WeatherComponent implements OnInit { datas; constructor(private weatherService: WeatherService) { } ngOnInit() { this.weatherService.getWeather() .then(data => this.datas = data); } }

Angular2：API调用返回错误

1 个答案: