Question

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

当我卷曲时，我得到了预期的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？

我的来电看起来像这样：

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' });
    }

Answer 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输出。如果有其他人遇到这个，这是构建一个解决我的问题的标题的正确方法：

let headers = new HttpHeaders({
    'Accept':'text/html',
    '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(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

Angular HttpClient行为原始HTML

1 个答案: