在Angular 4中获取json文档时遇到问题？

Question

我有以下Angular示例，该示例从https://raw.githubusercontent.com/angular/angular/master/bower.json获取json文档，并在类似<h1>{{title}}</h1>的模板中显示了response.toString（） <h1>{{title}}</h1>

import {Component} from "@angular/core";
import {Http} from "@angular/http";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  // url = 'http://s331998788.online.de:5080/dict.json';
  url = 'https://raw.githubusercontent.com/angular/angular/master/bower.json';

  constructor(http: Http) {
    let params: URLSearchParams = new URLSearchParams();
    http.get(this.url).subscribe(t => this.title = t.toString());
  }

}

t.toString()将Response with status: 200 OK for URL: https://raw.githubusercontent.com/angular/angular/master/bower.json t.toString()返回到{{title}} 。

相反，如果我得到的URL是http://s331998788.online.de:5080/dict.json ，则t.toString()似乎不会向{{title}}返回任何内容，并且模板仅显示app works! 。

这个json文件怎么了？

在我看来，相关的区别是工作页面上具有Access-Control-Allow-Origin: * ，而另一个则没有。 如果这是问题的根源，我如何告诉http也获得这些文件？

用curl -i询问头信息，我们得到以下信息：

$ curl -i 'http://s331998788.online.de:5080/dict.json'
HTTP/1.1 200 OK
Server: Zope/(2.13.21, python 2.7.5, linux2) ZServer/1.1
Date: Fri, 28 Apr 2017 23:01:32 GMT
Last-Modified: Fri, 28 Apr 2017 23:01:23 GMT
Content-Length: 46
Content-Type: application/json
Accept-Ranges: bytes

  {
    "name": "John",
    "age": 21
  }


$ curl -i 'https://raw.githubusercontent.com/angular/angular/master/bower.json'
HTTP/1.1 200 OK
Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'
Strict-Transport-Security: max-age=31536000
X-Content-Type-Options: nosniff
X-Frame-Options: deny
X-XSS-Protection: 1; mode=block
ETag: "007371a434d2486e54fb403ff912ec202322d603"
Content-Type: text/plain; charset=utf-8
Cache-Control: max-age=300
X-Geo-Block-List:
X-GitHub-Request-Id: 2C5E:674E:431187:459555:5903C9F0
Content-Length: 89
Accept-Ranges: bytes
Date: Fri, 28 Apr 2017 23:02:09 GMT
Via: 1.1 varnish
Connection: keep-alive
X-Served-By: cache-hhn1523-HHN
X-Cache: MISS
X-Cache-Hits: 0
X-Timer: S1493420529.409818,VS0,VE110
Vary: Authorization,Accept-Encoding
Access-Control-Allow-Origin: *
X-Fastly-Request-ID: 9270c2ab79c2d179ec005957794044dc1796841b
Expires: Fri, 28 Apr 2017 23:07:09 GMT
Source-Age: 0

{
  "name": "angular",
  "dependencies": {
    "polymer": "Polymer/polymer#^1.6.0"
  }
}

Answer 1

Http.get方法返回一个响应对象（如wannadream在评论中所述）。

http.get(this.url).subscribe(t => this.title = t.toString());

这显示了响应对象的字符串表示形式，如果要查看json，则必须使用t.text() （获取正文的原始文本）或t.json() （将原始文本解析为宾语）。

您应该添加错误订阅，以查看标题中为什么没有内容：

http.get(this.url).subscribe(t => this.title = t.toString(), error => console.error(error));