Angular HTTP GET 请求未按预期工作

Posted 2023-03-04

【中文标题】Angular HTTP GET 请求未按预期工作

【英文标题】：Angular HTTP GET request not working as expected

【发布时间】：2018-05-14 10:04:17

【问题描述】：

我正在尝试从以下网址获取信息：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 为我修复了它。

【问题讨论】：

@PranayRana 当我将 URL 粘贴到浏览器中时，我得到了正确的响应，当我在 Python 中使用 requests 时，我得到了正确的响应，为什么我使用 Angular 没有得到正确的响应？

我认为这是你的问题 - github.com/bobbymond/FantasyPremierLeagueAPI/issues/4 - 如果你检查控制台，你会看到你有一个 CORS 错误

你好如何在 stackblitz 中运行代码

@PranayRana，您只需在我提供的 Stackblitz 链接上单击 Fork。从那里它会自动编译。

嗨，更新了我的答案看看，当我尝试创建本地服务时，事情正在我的最后工作......你需要按照我的建议进行更改，你准备好了

【参考方案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();
        );;
  

【讨论】：

我已经修复了它，但我感谢您的努力。我要注意几点：Http 已弃用，所以我使用的是HttpClient，所以我没有尝试让您的解决方案正常工作。您还应该使用const 而不是let 并从'rxjs/add/operator/map' 导入map（只是为了将来有人使用您的解决方案）。

@Esoemah - 0k 似乎我正在使用较低版本...我会记下您的观点...通过更改它来修复您的程序对您有用..

我已经投票了，但是如果它使用最新的方法，我只会接受答案（Http、Headers 等都已弃用，例如它不是 HttpClient 和 HttpHeaders）。

【参考方案2】：

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

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

【讨论】：

在发布之前我已经尝试过很久了，如果你真的自己尝试过，你会发现这也不起作用。

其实是 CORS 的问题。试试这样的事情：***.com/questions/36768418/… 另外，还有一个 Chrome 扩展程序可以让你绕过这个问题：chrome.google.com/webstore/detail/allow-control-allow-origi/…

我刚刚在上面的评论中发布了我的控制台截图。

试试这样的：***.com/questions/36768418/… 另外，还有一个 Chrome 扩展可以让你绕过这个问题：chrome.google.com/webstore/detail/allow-control-allow-origi/…

【参考方案3】：

为此使用subscribe()

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

【讨论】：

在发布之前我已经尝试过很久了，如果你真的自己尝试过，你会发现这也不起作用。