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方法修改为如下所示：

＆＃13;

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

＆＃13;

Answer 3

将<{1}}用于此

subscribe()

Angular HTTP GET请求未按预期工作

3 个答案: