Angular HttpClient 行为原始 HTML答案

【问题标题】：Angular HttpClient Behavior Raw HTMLAngular HttpClient 行为原始 HTML
【发布时间】：2018-07-19 14:32:24
【问题描述】：

我正在使用 Angular 5 HttpClient，我正在尝试从提供 json 数据和 HTML 的页面获取 HTML 响应。（Spotify 身份验证）。

当我 curl 时，我得到了预期的 HTML 和 json 有效负载。无论我用 HttpClient 尝试什么，我所能得到的都是 json，在这种情况下它没有帮助。我想访问 HTML。我已经验证我的标题在命令行 curl 和 HttpClient 之间是相同的。

curl -vvv https://accounts.spotify.com/authorize/?client_id=xxxxxxxxxxxxxxx81ad8fc&response_type=code&redirect_uri=http://reaver.xxxxxx.com:4200/callback&state=34fFs29kd09

    <!DOCTYPE html>
<html ng-app="accounts" ng-csp>
  <head>
    <meta charset="utf-8">
    <title ng-bind="(title && (title | localize) + ' - ') + 'Spotify'">Spotify</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <base href="/">
    <link href="https://d2d1dxiu3v1f2i.cloudfront.net/a4a5157/css/index.css" media="screen" rel="stylesheet">

    <script async defer src="https://www.google.com/recaptcha/api.js"></script>
    <script async defer src="https://d2d1dxiu3v1f2i.cloudfront.net/a4a5157/js/index.js" sp-bootstrap></script>
    <meta ng-non-bindable sp-bootstrap-data='{"client":{"name":"Playlist Reaver"},"country":"US","useCaptcha":false,"locales":["*"],"BON":["0","0",-795429514]}'>
  </head>
  <body ng-view></body>
</html>

该有效负载的这一部分是我可以让 HttpClient 向我公开的全部内容。

{"client":{"name":"Playlist Reaver"},"country":"US","useCaptcha":false,"locales":["*"],"BON":["0","0",-795429514]}

通常我会说这很好，但我确实需要访问 HTML。

如何从包含 json 数据和 HTML 的此类响应中获取原始 html？

我的 get 调用如下所示：

return this.http.get(this.apiGeneric, { params: params, observe: 'response'});

附加信息：似乎没有添加我的 http 标头。我进行了以下更改，并且在 http 请求标头中没有看到 XFF 标头。

  // function returns Observable UserResponse object
  getUrl() {
    this.httpHeaders = new HttpHeaders();
    //.set('Content-Type'
    this.httpHeaders.set('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8');
    this.httpHeaders.set('XFF', 'testing123');

    let params = new HttpParams();
    const params = new HttpParams()
      .set('client_id', this.clientId)
      .set('response_type', 'code')
      .set('redirect_uri', this.redirectUri)

    console.log(params);
    return this.http.get(this.apiGeneric, { headers: this.httpHeaders, params: params, observe: 'response' });
    }

【问题讨论】：

您是否尝试过设置合适的接受类型？
尝试使用 { params: params, observe: 'response', responseType: 'text'}
谢谢@jonrsharpe。我确实做到了： this.httpHeaders.set('Accept', 'text/html'); Chrome 开发者模式将此捕获为正在发送的标头：Accept:application/json, text/plain, /
@david 谢谢。一旦我获得了正确的 api 标头并获得了 HTML 和其他有效负载，然后我得到了 json 解码错误，并且 responseType 帮助关闭了 json 解码。一切就绪，谢谢！

标签： angular httpclient spotify

【解决方案1】：

好的，我找到了问题。这可能是我对生成标头的误解，但我发现的是：

this.httpHeaders = new HttpHeaders();
this.httpHeaders.set('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8');

（.set 和 .add）会导致一个空的 httpHeaders

更改我构建标题的方式解决了我的问题，并且插入了内容类型标题（和一些客户测试标题），我得到了完整的 HTML 输出。如果其他人遇到这种情况，这是构建解决我问题的标头的正确方法：

const headers = new HttpHeaders({
    Accept:'text/html',
    XFF:'testing123'
  });

const params = new HttpParams()
  .set('client_id', this.clientId)
  .set('response_type', 'code')
  .set('redirect_uri', this.redirectUri)

console.log(headers.get('Accept'));
console.log(this.apiGeneric);
return this.http.get(this.apiGeneric, { headers: headers, params:params });
}

证据：XFF Header 和 Accept 头是我们设置的：

Accept:text/html
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9
Connection:keep-alive
Host:accounts.spotify.com
Origin:http://evil.com/
Referer:http://192.168.1.29:4200/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36
XFF:testing123

【讨论】：

HttpHeaders 对象是不可变的； .set 和 .add 返回带有该附加标头的新对象。因此，链接或设置 this.httpHeaders = this.httpHeaders.set(...); 是有效的。
@jonrsharpe 谢谢。这当然是我的误解。现在我完全明白了。再次感谢！