how to solve 'content-disposition' header show null in browser

Question

In my angular application, I consume an excel file return from the web API core. I also set a file name in the content-disposition header in the API method. But I can't get the content-disposition header from API. How to solve this problem.

Api method code is:

    [HttpGet("ExportToExcelAsync")]
    public async Task<IActionResult> ExportToExcelAsync(int id, int rId)
    {  

            var Details = await _Service.GetDetails(id, rId);                
            var excelFile = exportToExcel.ExportExcel(Details , 
            templatePath).Result;               
            var content = excelFile.ToArray();
            var actualFile = Details.DocumentName;
            Response.Headers.Add("x-file-name","" + actualFile + ".xlsx");
            Response.Headers.Add("Content-Disposition", "" + actualFile + ".xlsx");
                          
            return File(
           content,
           "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
           "" + actualFile + ".xlsx");          
    } 

In my angular side code:

exportToExcel(){

this.Service.ExportToExcel(Id,rId).subscribe((response) => {
var contentDisposition=response.headers.get('content-disposition');
this.file= contentDisposition.split(';')[1].trim().split('=')[1]; 
this.downloadFile(response,this.file);

}); }

Answer 1

You can try to specify the headers which need to be exposed to the client while you enable CORS in your ASP.NET Core WebAPI backend app, like below.

.WithExposedHeaders("x-file-name", "Content-Disposition")