角6 http获取JSON

Question

我在从某些json文件中获取信息时遇到了困难。

案例1(作品)：

服务：

private xmlToJson: string = 'https://rss2json.com/api.json?rss_url=';

getImg(Url: string) {
return this.http.get(this.xmlToJson + Url);
}

构成部分：

private url='https://api.flickr.com/services/feeds/photos_public.gne';

public images: any = [];

this.imgDataService.getImg(this.url)
  .subscribe(data => this.images = data);

HTML：

<h1>{{images.feed.title}}</h1>

案例2(不起作用)：

服务：

getImg(Url: string) {
return this.http.get(Url);
}

构成部分：

private url = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json&nojsoncallback=1';

public images: any = [];

this.imgDataService.getImg(this.url)
  .subscribe(data => this.images = data);

HTML：

<h1>{{images.title}}</h1>

知道为什么2号案子不管用吗？我在这里运行了两个JSON：https://jsonlint.com/，它们都是有效的。

Answer 1

您有一个CORS错误。

下面是一个StackBlitz，显示了这两个调用以及从服务器返回的内容。对Flickr的调用失败，因为Flickr没有(至少在此服务上)返回访问头-控制-允许-原产地来启用公共访问。

具有讽刺意味的是，您可以从运行在web浏览器中的而不是的任何代码中调用web服务。

由于您可能无法说服他们(其他人已经尝试过)，我建议您放弃Flickr。

最后一个注意事项:如果打开浏览器的开发工具并检查控制台，您将能够看到错误。这应该是你在网络开发中遇到的任何奇怪行为的第一站。

Answer 2

将public images: any = []更改为public images: any = {}

图像数据不是数组。

Answer 3

代替this.imgDataService.getImg(this.url)类型的this.imgDataService.getImg(this.url2)