如何从API接收HTML响应并将其绑定到Angular 7中的视图模板。

Question

我的API调用的响应是HTML文档，我需要将html响应绑定到我的angular模板。我尝试使用下面的可观察的代码，没有运气。请帮忙。

服务方法：

getResults(): Observable<string> {
     return this.http.get<any>('https://stackoverflow.com/questions/tagged/angular');
  }

订阅组件：

ngOnInit() {
    this._apiService.getResults()
    .subscribe(data => {
      this.results = data;
    },
    error => console.log('Error from backend API', +error));
  }

Answer 1

如果我对问题的理解正确，例如，您会得到html代码：

<div>Some text</div>

您想将其添加到模板中吗？因此，首先您必须修改get调用。默认情况下，获取get作为响应。 您要做的是这样：

getResults(): Observable<string> {
     return this.http.get<string>('https://stackoverflow.com/questions/tagged/angular',{responseType: 'text'});
  }

并在模板中排第二：

<div class="one" [innerHtml]="htmlToAdd"></div>

然后在订户中

ngOnInit() {
    this._apiService.getResults()
    .subscribe(data => {
      this.innerHtml = data;
    },
    error => console.log('Error from backend API', +error));
  }

---

如果这是 CORS 问题，那么如果您在本地环境中工作，则必须设置代理。去创建proxy.conf.json。

{
  "/questions/tagged/angular": {
    "target": "https://stackoverflow.com/questions/tagged/angular",
    "secure": false
  }
}

更改网址：

getResults(): Observable<string> {
     return this.http.get<any>('/questions/tagged/angular');
  }

并使用ng serve --proxy-config proxy.conf.json

运行您的应用

Answer 2

Cors的含义是，如果您尝试访问说https://stackoverflow.com/questions/tagged/angular，则仅当窗口URL为https://stackoverflow.com时才允许发出该请求。您在发出请求时在浏览器中看到的URL称为来源。当您从localhost请求时，它将被阻止，因为 localhost 和 https://stackoverflow.com 是不同的。这由称为access-control-allow-origin的响应标头控制。这将由您正在访问的特定站点设置。我们不能改变这一点。您可以在MDN - CORS上了解有关此内容的更多信息。

因此，出于开发目的，您可以设置一个简单的本地服务器以返回html文件。或者尝试访问未设置access-control-allow-origin标志的网站。

例如，Mozilla网站允许所有人访问，因此，如果您尝试从stackoverflow.com更改为https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS，它将起作用。

您可以在“网络”选项卡中检查站点是否允许交叉访问。请参见下图。如果*全部允许，或者仅允许提及的网址。

还请注意，默认情况下，angular会将所有请求视为json。如果要读取其他类型，例如html，则需要使用{responseType: 'text'}作为第二个参数来指定。

this.http.get('https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS', {responseType: 'text'})
  .subscribe(data => {
    console.log(data);
  }, error => {
    console.log(error);
  });;

请参见Stackblitz live example