![](/img/trans.png)
[英]Unable to view 'Content-Disposition' headers in Angular4 GET response
[英]how to read content-disposition headers from server response angular 2
使用新的 Angular Http,您可以在服务代码中尝试以下操作。
downloadLink(): Observable<HttpResponse<Blob>> {
return this.http.get<Blob>(this.someURL, {
observe: 'response',
responseType: 'blob' as 'json'
});
}
并使用以上作为
this.someService
.downloadLink()
.subscribe(
(resp: HttpResponse<Blob>) => {
console.log(resp.headers.get('content-disposition'));
data = resp.body
});
此外,在服务器端,需要设置以下标头作为响应。 'Access-Control-Expose-Headers': 'Content-Disposition'
就像在 Java Spring Boot 中一样,可以使用
final HttpHeaders headers = new HttpHeaders();
headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=1.xlsx");
headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, HttpHeaders.CONTENT_DISPOSITION);
对于那些抱怨最佳解决方案不起作用并且标题中只有内容类型的人,您需要设置 'Access-Control-Expose-Headers': 'Content-Disposition' ON SERVER SIDE。 我正在使用 asp.net core,然后我必须执行以下操作。
app.UseCors(builder =>
builder.WithOrigins(originsAllowed.ToArray())
.AllowAnyMethod()
.AllowAnyHeader()
.WithExposedHeaders("Content-Disposition")
你可以在这里尝试这种代码。
注意:不要使用地图
this.http.post(URL, DATA)
.subscribe((res) => {
var headers = res.headers;
console.log(headers); //<--- Check log for content disposition
var contentDisposition= headers.get('content-disposition');
});
在 angular 中,我们可以读取文件名,如下所示,
this.http.post(URL, DATA).subscribe(
(res) => {
var contentDisposition = res.headers.get('content-disposition');
var filename = contentDisposition.split(';')[1].split('filename')[1].split('=')[1].trim();
console.log(filename);
});
但主要是我们需要在API中指定Access-Control-Expose-Header ,如下所示,
注意:最后一行是必填的
FileInfo file = new FileInfo(FILEPATH);
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = file.Name
};
response.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
使用 Angular 9 和 Expresss
需要在 Express 中允许此标头
res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
角
this.http.get(url, { observe: 'response', responseType: 'blob' as 'json' })
.subscribe((res: any) => {
console.log(res.headers.get('content-disposition'));
});
在 Angular 7 中,up-voted 方法不起作用,你需要这样做:
const responseHeaderFilename = response.headers.get('content-disposition');
请查找 Angular 官方文档以获取更多详细信息: https : //angular.io/guide/http#reading-the-full-response
并确保“Content-Disposition”像@mslugx 回答一样公开
从响应头中获取文件名。
(data)=>{ //the 'data' is response of file data with responseType: ResponseContentType.Blob.
let filename = data.headers.get('content-disposition').split(';')[1].split('=')[1].replace(/\"/g, '')
}
(文件在浏览器中以二进制格式保存。文件名在客户端的 Network/header/Content-Disposition 中,我们需要获取文件名)
In Server-side code:
node js code-
response.setHeader('Access-Control-Expose-Headers','Content-Disposition');
response.download(outputpath,fileName);
In client-side code:
1)appComponent.ts file
import { HttpHeaders } from '@angular/common/http';
this.reportscomponentservice.getReportsDownload(this.myArr).subscribe((event: any) => {
var contentDispositionData= event.headers.get('content-disposition');
let filename = contentDispositionData.split(";")[1].split("=")[1].split('"')[1].trim()
saveAs(event.body, filename);
});
2) service.ts file
import { HttpClient, HttpResponse } from '@angular/common/http';
getReportsDownload(myArr): Observable<HttpResponse<Blob>> {
console.log('Service Page', myArr);
return this.http.post(PowerSimEndPoints.GET_DOWNLOAD_DATA.PROD, myArr, {
observe: 'response',
responseType: 'blob'
});
}
CORS 请求仅公开 6 个标头:
为了通过 CORS 请求访问自定义标头,服务器必须明确将它们列入白名单。 这可以通过发送响应头来完成: Access-Control-Expose-Headers<\/strong>
Java: addExposedHeader<\/strong> https:\/\/docs.spring.io\/spring-framework\/docs\/4.2.x\/javadoc-api\/org\/springframework\/web\/cors\/CorsConfiguration.html<\/a>
.NET 核心: WithExposedHeaders<\/strong> https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/security\/cors?view=aspnetcore-6.0<\/a>
Express JS:暴露标题<\/strong>https:\/\/expressjs.com\/en\/resources\/middleware\/cors.html<\/a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.