c# - 从跨源 http.get 请求的 ASP.NET Web API 2 响应中获取 Angular 中的特定响应 header (例如，Content-Disposition)

Question

当我通过 Angular 服务访问它时，我无法获取特定 header (Content-Disposition)。 CORS 已启用，Angular HTTPClient 设置为检索所有 header 。

Startup.cs

 public void Configuration(IAppBuilder app)
        {

            HttpConfiguration config = new HttpConfiguration();
            WebApiConfig.Register(config);
            ConfigureOAuth(app, config);
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
            app.UseWebApi(config);
 } 

文件 Controller .cs

[Route("file/{idFile}")]
        public HttpResponseMessage GetFile(string idFile)
        {
            string file;
            byte[] file;

            document = fileService.GetFile(idDFile, out fileName);

            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new ByteArrayContent(file)
            };
            result.Content.Headers.ContentDisposition =
                new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
                {
                    FileName = nomeFile
                };
            result.Content.Headers.ContentType =
                new MediaTypeHeaderValue("application/octet-stream");

            return result;
        }

文件服务.ts

getFile(fileId: number): Observable<Response> {
        const url = `${urlBackEnd}/file/${fileId}`;
        return this.http.get(url, { observe: 'response', responseType: 'blob' })
          .map(res => {;
            console.log(res.headers.keys()); // There's no CONTENT-DISPOSITION
            saveAs(<Blob>res.body);
            return res.body;
          })
          .catch(e => this.handleErrors(e));
}

这是标题 console.log:

[
  "content-type",
  "cache-control"
]

我错过了什么？我只想获取 Content-Disposition header 。

Answer 1

在 fileController.cs 文件中，除了设置 Content-Type 和 Content-Disposition 响应 header 外，您还需要设置 Access-Control-Expose-Headers :

result.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");

请注意，虽然 Fetch 规范实际上允许“*”作为 Access-Control-Expose-Headers 的值(尽管从当前的阅读中还不是很清楚规范文本…) — 浏览器还不符合规范；因此，您应该明确列出浏览器应向您的前端 JavaScript 代码公开的所有响应 header 名称——Cache-Control、Content-Language、Content-Type 除外、Expires、Last-Modified 和 Pragma，它们总是暴露的。对于这六个以外的任何响应 header 以及您在 Access-Control-Expose-Headers header 的值中明确列出的响应 header ，浏览器会阻止前端代码访问它们。