一晒衩、前端代碼部分:
1卧晓、需要在HttpService中post的配置項(xiàng)中添加observe:'response'
post(url:string, body:any |null, options: {
????????headers?: HttpHeaders | {
????????????????[header:string]:string |string[];
? ? ? ? };
? ????? observe:'response';
? ? ????params?: HttpParams | {
????????????????[param:string]:string |string[];
? ? ????};
? ? ????reportProgress?:boolean;
? ? ????responseType?:'json';
? ????? withCredentials?:boolean;
}): Observable>;
請(qǐng)仔細(xì)研究上述post請(qǐng)求的配置項(xiàng)option,具體配置如下:
_post_form(url:string, body:any): Observable {
????????????return this.http.post(url, body, {reportProgress:true, observe:'response'})
????????????.pipe(retry(0), catchError((err) =>this.handleError(err, this.router)));
?}
要注意!!!observe:'response'設(shè)置后上祈,接口響應(yīng)拿到的是包含status,statusText,body等的全部響應(yīng)信息登刺,取值時(shí)要注意用result.body才能拿到要的內(nèi)容籽腕。
2、獲取響應(yīng)頭參數(shù)方法塘砸,?res為接口響應(yīng)节仿,resHeader為要獲取的響應(yīng)頭的標(biāo)頭名稱(小寫)
this.commonService.getResponseHeaders(result, 'content-disposition');
getResponseHeaders(res, resHeader) {
? ????????const keys = res.headers.keys(); // 獲取響應(yīng)頭各參數(shù)名數(shù)組
? ????????const headers = keys.map(key =>`${key.toLowerCase()}:${res.headers.get(key)}`); // 獲取響應(yīng)頭各參數(shù)名及參數(shù)值的數(shù)組
????????? let resHeaderContent ='';
????????? if (resHeader && headers && headers.length) {
????????????????headers.forEach((head) => {
????????????????????????if (head.indexOf(resHeader) != -1) {
????????????????????????????????resHeaderContent = head.split(':')[1];
? ? ? ????????????????????}
????????????????});
????????? }
? ????????return resHeaderContent;
}
貼出keys和headers的打印值(key.toLowerCase(),是因?yàn)楣雀璧膋ey打印出來都是小寫開頭,而IE是大寫開頭掉蔬,這里要統(tǒng)一處理為小寫)
二廊宪、后端代碼部分:
Access-Control-Expose-Headers響應(yīng)報(bào)頭指示哪些報(bào)頭可以公開
如果客戶端獲取到想要的請(qǐng)求頭,則必須使用Access-Control-Expose-Headers 列出他們女轿。