无法将自定义标头从 WebAPI 公开给客户端答案

【问题标题】：Not able to expose the custom headers from WebAPI to client无法将自定义标头从 WebAPI 公开给客户端
【发布时间】：2017-02-11 01:01:57
【问题描述】：

我编写了一个程序来下载 web api 返回的 pdf、word 或 txt 文件，它工作正常。在服务器端，我使用了 WebApi 和客户端 AngularJs。现在的问题是，我还需要来自 api 的文件名，为此我需要读取 api 返回的标头。但reponse.headers 不包含所有标题信息。以下是我的代码：

 [HttpGet]
 [Authorize]
    public HttpResponseMessage GetTranscript(string key, int format)
    {
        var badRequest = Request.CreateResponse(HttpStatusCode.OK, "Not a valid input."); //ResponseMessage(Request.CreateResponse(HttpStatusCode.BadRequest, "Not a valid input."));
        if (string.IsNullOrWhiteSpace(jiraTaskKey))
        {
            return badRequest;
        }

        string transcript = _mediaCaptionService.GetTranscript(UserId, key);

        string fileName = "transcript";
        var response = new HttpResponseMessage(HttpStatusCode.OK);

        if (format == (int)TranscriptFormat.PDF)
        {
            byte[] byteInfo = GeneratePDFTranscript(transcript);
            response.Content = new ByteArrayContent(byteInfo);
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            fileName = fileName + ".pdf";
        }
        else if (format == (int)TranscriptFormat.TXT)
        {
            response.Content = new StringContent(transcript, System.Text.Encoding.UTF8, "text/plain");
            fileName = fileName + ".txt";
        }
        else if (format == (int)TranscriptFormat.WORD)
        {                
            string transcriptFontName = "Arial";
            byte[] byteInfo = GenerateWordTranscript(transcript, transcriptFontName);
            response.Content = new ByteArrayContent(byteInfo);
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            fileName = fileName + ".doc";
        }
        else
        {
            return badRequest;
        }
        response.Content.Headers.Add("x-filename", fileName);
        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") {
            FileName = fileName
        };
        //response.Content.Headers.ContentDisposition.FileName = fileName;
        return response; //ResponseMessage(response);
    }

在客户端

  function getTranscriptResult(method, apiUrl, data) {
        var deferred = $q.defer();
        $http({
            method: method,
            url: apiUrl,
            data: data,
            responseType: 'arraybuffer'

        }).success(function (data, status, headers, config) {
            debugger;
            var results = [];
            results.data = data;
            results.headers = headers();
            results.status = status;
            results.config = config;                
            deferred.resolve(results);

        }).error(function (error, status, headers, config) {
            deferred.reject(error);

        });
        return deferred.promise;
    }

但是当我在上面的代码中放置断点时，我得到了这个：

你能告诉我我的代码中我无法获取文件名的问题在哪里吗？如果您需要更多信息，也请告诉我。

【问题讨论】：

请注意：这与 Chrome 无关。如果您直接在 Chrome 中使用该服务的 URI，您会注意到它会下载具有正确文件名的文件。认为您应该将标题从“Google Chrome...”更改为“Angular...”

标签： angularjs asp.net-web-api

【解决方案1】：

添加以下行后解决了我的问题。

// Add a custom header for filename and expose it to be consumed by JavaScript.
response.Content.Headers.Add("Filename", zipFileName);
response.Content.Headers.Add("Access-Control-Expose-Headers", "Filename");

所以基本上添加 Access-Control-Expose-Headers 帮助我将自定义标头公开给客户端。有关这方面的更多信息，请关注link

【讨论】：