Javascript HTTP GET请求在Angular 7中返回错误（状态200）

我相信我正在从wikimedia API获取一个对象，但是我不知道如何解析它以显示它

//app.component.ts

import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Post } from './post';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Wiki Search';
  // readonly ROOT_URL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=japan&origin=*&format=json';
  readonly ROOT_URL = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry Potter&origin=*&callback=JSON_CALLBACK';
  // https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=15&generator=search&origin=*&gsrsearch=japan"


  posts: Observable<any>;

  constructor(private http: HttpClient) {}

  getPosts(){
    this.posts = this.http.get(this.ROOT_URL)
  }
}

//app.component.html
<input type="text" placeholder="Search for pages..">
<button (click)="getPosts()">Get Posts</button>
<div *ngFor="let post of posts | async">
 {{ post | json }}
</div>

<ul class=filter-select>
  <li class="filter-select-list">
    <p class="wiki-page"></p>
  </li>
</ul>

//app.component.ts
从'@angular/core'导入{Component}；
从'@angular/common/http'导入{HttpClient，HttpParams}；
从“/Post”导入{Post}；
从“rxjs/Observable”导入{Observable}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题=‘维基搜索’；
//只读根目录https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=japan&origin=*&格式=json'；
只读根目录https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&ExplaintText&ExSequences=1&exlimit=max&gsrsearch=Harry Potter&origin=*&callback=JSON_callback'；
// https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=15&generator=search&origin=*&gsrsearch=日本“
职位：可观察；
构造函数（私有http:HttpClient）{}
getPosts（）{
this.posts=this.http.get（this.ROOT\u URL）
}
}
//app.component.html
发帖
{{post | json}}

---

如果我在响应处理程序中插入responseType:text，我可以在开发人员控制台中读取作为错误返回的数据。

您正在调用的URL以queryString参数

callback=JSON\u callback结束。

https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry%20Potter&origin=*&callback=JSON_CALLBACK

这是在一个名为JSON_callback的回调方法中包装JSON，该方法不是有效的JSON，不允许解析。我尝试在没有queryString参数的情况下进行解析，现在响应是一个有效的纯JSON，您应该能够解析它

https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=Harry%20Potter&origin=*

---

抱歉，我的问题是如何解析返回值，不小心将JSON_回调留在了中。使GET-in-Postman返回有效的JSON，但是当我在angular中进行调用时，我得到一个错误：找不到不同的支持对象“[object object]'类型为'object'。或错误：状态代码200。我已经了解到这很可能是由于非JSON被传回，但我能看到的只是有效的JSON。