Angular HTTP GET 请求未按预期工作

Question

我正在尝试从以下网址获取信息：https://fantasy.premierleague.com/drf/entry/2241/event/14/picks。将其粘贴到浏览器中显示了我在 Angular 中使用 HTTP GET 请求时期望获得的实际数据

{"active_chip":"","automatic_subs":[{"id":54265617,"element_in":367,"element_out":264,"entry":2241,"event":14}],"entry_history":{"id":65471706,"movement":"new","points":51,"total_points":948,"rank":2041408,"rank_sort":2041432,"overall_rank":1,"targets":null,"event_transfers":1,"event_transfers_cost":0,"value":1030,"points_on_bench":-1,"bank":12,"entry":2241,"event":14},"event":{"id":14,"name":"Gameweek 14","deadline_time":"2017-11-28T18:45:00Z","average_entry_score":14,"finished":false,"data_checked":false,"highest_scoring_entry":5368938,"deadline_time_epoch":1511894700,"deadline_time_game_offset":0,"deadline_time_formatted":"28 Nov 18:45","highest_score":76,"is_previous":false,"is_current":true,"is_next":false},"picks":[{"element":260,"position":1,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":100,"position":2,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":34,"position":3,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":13,"position":4,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":367,"position":5,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":501,"position":6,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":234,"position":7,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":104,"position":8,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":108,"position":9,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":472,"position":10,"is_captain":false,"is_vice_captain":true,"multiplier":1},{"element":394,"position":11,"is_captain":true,"is_vice_captain":false,"multiplier":2},{"element":286,"position":12,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":264,"position":13,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":405,"position":14,"is_captain":false,"is_vice_captain":false,"multiplier":1},{"element":548,"position":15,"is_captain":false,"is_vice_captain":false,"multiplier":1}]}

但是，我得到以下信息：

{ "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": true, "value": { "url": "https://fantasy.premierleague.com/drf/entry/2241/event/14/picks", "body": null, "reportProgress": false, "withCredentials": false, "responseType": "json", "method": "GET", "headers": { "normalizedNames": {}, "lazyUpdate": null, "headers": {} }, "params": { "updates": null, "cloneFrom": null, "encoder": {}, "map": null }, "urlWithParams": "https://fantasy.premierleague.com/drf/entry/2241/event/14/picks" }, "scheduler": null }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} }

显示我的问题的示例：https://stackblitz.com/edit/http-basics-zvqfxs

编辑：显然这是一个 CORS 问题，安装 this extension 为我修复了它。

Answer 1

完成代码如下，当我设置返回数据的休息服务时，它在我的本地计算机上为我工作，但它在https://http-basics-zvqfxs.stackblitz.io/网站失败，因为你正在执行跨域请求，并给出错误

XMLHttpRequest cannot load 
https://fantasy.premierleague.com/drf/entry/2241/event/14/picks. No 'Access-
Control-Allow-Origin' header is present on the requested resource. Origin 
'https://http-basics-zvqfxs.stackblitz.io' is therefore not allowed access.

要解决上述错误，您需要修改后端休息服务，它应该允许跨域请求。

本地机器中的工作代码（已经为跨域请求设置了角度代码）

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Headers, RequestOptions, Response, ResponseContentType } from '@angular/http';

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

  readonly ROOT_URL = 'https://fantasy.premierleague.com/drf/entry/2241/event/14/picks';

  players: string;

  constructor(private http: Http) { }

  getPlayers() {
      let headers = new Headers({
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Credentials': 'true'
        });
        let options = new RequestOptions({ headers: headers });

       this.http.get('https://fantasy.premierleague.com/drf/entry/2241/event/14/picks',options)
          .map((res)=> res.json() )
          .subscribe((data) => {
            this.players =   data.json();
        });;
  }
}

Answer 2

根据您的示例，问题是您使用 Observable 而不订阅它。 您应该将 getPlayers 方法修改为如下所示：

this.http.get(this.ROOT_URL).subscribe(res=>this.players=res);

Answer 3

为此使用subscribe()

getPlayers() {
   this.http.get(this.ROOT_URL).subscribe(data => {
      console.log(data);
      //this.players = data;
   });
}