从跨域 http.get 请求的 ASP.NET Web API 2 响应中获取 Angular 中的特定响应标头（例如 Content-Disposition）答案

【问题标题】：Get a specific response header (e.g., Content-Disposition) in Angular from an ASP.NET Web API 2 response for a cross-origin http.get request从跨域 http.get 请求的 ASP.NET Web API 2 响应中获取 Angular 中的特定响应标头（例如 Content-Disposition）
【发布时间】：2018-05-18 21:54:18
【问题描述】：

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

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

fileController.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;
        }

fileService.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 标头。

【问题讨论】：

您发送跨域请求的服务器必须在响应中包含 na Access-Control-Expose-Headers 标头，并在其值中包含 Content-Disposition。在stackoverflow.com/questions/39020385/…查看答案
感谢@sideshowbarker，我尝试这样做，但仍然无法获得该标题。 i.imgur.com/NemwLRb.pngresult.Content.Headers.Add("Access-Control-Expose-Headers", "*");
我认为浏览器还不支持 Access-Control-Expose-Headers 的 * 通配符值。尝试在值中明确列出 Content-Disposition。
看到这个：stackoverflow.com/questions/58601675/…

标签： c# angular cors asp.net-web-api2 owin

【解决方案1】：

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

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

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

【讨论】：

不知道是不是很重要——我不得不使用连字符的名字：Content-Disposition :: result.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
@MarkHeadley 是的，它确实有所作为。所以我编辑了答案来纠正这个问题——感谢你发现它以便我修复它

【解决方案2】：

 httpServletResponse.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
 httpServletResponse.setHeader(Content-Disposition,getFileName());

这个解决方案对我有用。

【讨论】：

这是否比 2 年前接受的答案更好的解决方案，它解释了设置标题的内容和原因？