Unable to open custom headers from WebAPI for client

Question

I wrote a program to download the pdf, word or txt file returned by the web api and it works fine. On the server side, I used WebApi and the client side of AngularJs. Now the problem is that I also need the file name from the api, and for this I need to read the headers returned by the api. But reponse.headers does not contain all the header information. Below is my code:

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

and client side

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

But when I put the breakpoint in the code above, I get the following:

Could you tell me where the problem is in my code, that I cannot get the file name? Also, please let me know if you need more information.

Answer 1

After adding below line my problem is solved.

 // 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"); 

So basically adding Access-Control-Expose-Headers helped me expose the custom headers for the client. For more information about this, please follow the link.