Aha*_*ack 5 httpclient spotify angular
我正在使用Angular 5 HttpClient，并且试图从同时提供json数据和HTML的页面获取HTML响应。（验证身份）。
当我卷曲时，我得到了预期的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' });
}
好的，我发现了问题。这可能是我对生成标头的误解，但我发现：
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 标头和 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
| 归档时间： |
|
| 查看次数： |
3785 次 |
| 最近记录： |