Angular 角度HTTP GET请求未按预期工作

我正在尝试从以下url获取信息：

https://fantasy.premierleague.com/drf/entry/2241/event/14/picks

。将其粘贴到浏览器中会显示我在使用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": {} }

显示我的问题的示例：

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

为此使用

subscribe（）

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

---

当我设置rest服务返回我的数据时，它在我的本地计算机上为我工作，但在网站上失败，因为您正在执行跨域请求，并给出错误

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.

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

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

---

根据您的示例，问题在于您使用的是Observable，而没有订阅它。 您应该修改getPlayers方法，使其如下所示：

---

this.http.get（this.ROOT\u URL）.subscribe（res=>this.players=res）

@PranayRana当我将URL粘贴到浏览器中时，我会得到正确的响应，在Python中使用

请求时，我也会得到正确的响应，为什么我不能使用Angular得到正确的响应？我想这是你的问题--如果你检查控制台，你会发现你有一个CORS错误。如何在中运行代码stackblitz@PranayRana您只需单击我提供的Stackblitz链接上的
Fork
。从那里，它会自动编译。嗨，更新了我的答案。看，当我尝试创建本地服务时，事情在我这边运行…你需要按照我的建议进行更改，并且你已经准备好了。我在发布这个之前很久就已经试过了，如果你自己真的试过了，你会发现这也不起作用。实际上这是CORS的一个问题。试着这样做：另外，有一个Chrome扩展可以让你绕过这个问题：我刚刚在上面的评论中发布了我的控制台的屏幕截图。试着这样做：还有一个Chrome扩展可以让你绕过这个问题：我在发布这个之前很久就已经尝试过了，如果你真的亲自尝试过，你会发现这也不起作用。我已经修复了它，但我感谢你的努力。我要注意几件事：
Http
已被弃用，因此我使用的是
HttpClient
，因此我没有尝试让您的解决方案工作。您还应该使用
const
而不是
let
，并从
'rxjs/add/operator/map'
导入
map
（仅适用于将来有人使用您的解决方案时）@Esoemah-0k似乎我正在使用较低版本…我会记下你的观点…通过更改程序来修复你的程序将对你有效..我已经进行了升级，但我只会接受答案，如果它使用最新的方法（Http、Header等都不推荐使用，例如，它不是HttpClient和HttpHeader）。
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();
        });;
  }
}