Я не могу получить доступ к Response.Headers («Content-Disposition») на клиенте даже после включения CORS

Question

Я пытаюсь получить имя файла Excel, сгенерированного в бэкэнде (Asp.net Core 2.2), и, как вы можете видеть в коде c #, имя файла извлекается в заголовке ответа, но от клиентаЯ не могу получить доступ к заголовку «Расположение содержимого» * ​​1001 *

Как вы можете видеть на изображении ниже, несмотря на то, что расположение содержимого отсутствует в заголовках, оно присутствует в заголовках ответа XHR

log of response.headers

XHR

Я уже включил политику де CORS в бэкэнде, как вы можете видетьздесь:

Startup.cs (метод ConfigureServices)

services
    .AddCors(options =>
    {
        options.AddPolicy(CorsAllowAllOrigins,
            builder => builder.WithOrigins("*").WithHeaders("*").WithMethods("*"));
    })
    .AddMvc(options =>
    {
        options.Filters.Add(new AuthorizeFilter(authorizationPolicy));
    })
    .SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

services
    .AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        var key = Encoding.ASCII.GetBytes(jwtSecurityOptions.SecretKey);

        options.Audience = jwtSecurityOptions.Audience;
        options.RequireHttpsMetadata = false;
        options.SaveToken = true;
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuerSigningKey = true,
            IssuerSigningKey = new SymmetricSecurityKey(key),
            ValidateIssuer = false,
            ValidateAudience = false
        };
    })

Startup.cs (метод Configure)

app.UseAuthentication();
app.UseCors(CorsAllowAllOrigins);
app.UseMvc();

Контроллер

[HttpGet("{reportResultId}/exportExcelFile")]
[ProducesResponseType(StatusCodes.Status200OK)]
[ProducesErrorResponseType(typeof(void))]
[Authorize(Policy = nameof(RoleType.N1))]
public ActionResult ExportExcelFile(int reportResultId, [FromQuery]bool matchedRows, [FromQuery]ExportExcelType exportExcelType)
{
    var authenticatedUser = Request.GetAuthenticatedUser();
    var result = _reconciliationResultService.GetDataForExportExcelFile(reportResultId, matchedRows,authenticatedUser.UserName ,exportExcelType, authenticatedUser.UserName, authenticatedUser.Id);

    if (result != null)
    {
        MemoryStream memoryStream = new MemoryStream(result.WorkbookContent);
        var contentType = new Microsoft.Net.Http.Headers.MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        var fileStreamResult = new FileStreamResult(memoryStream, contentType)
        {
            FileDownloadName = result.FileName
        };

        fileStreamResult.FileDownloadName=result.FileName;

        return fileStreamResult;
    }
    else
    {
        return null;
    }
}

-------------- Клиент ---------------------

Container.ts

exportExcelFile(matchedRows: string) {
    this._reportService.exportExcelFile(matchedRows, this.reportInfo.id, this.exportExcelType).subscribe((response) => {
        var filename = response.headers.get("Content-Disposition").split('=')[1]; //An error is thrown in this line because response.headers.get("Content-Disposition") is always null
        filename = filename.replace(/"/g, "")
        const blob = new Blob([response.body],
            { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

        const file = new File([blob], filename,
            { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

        this.exportingExcelFile = false;
        this.ready = true;
        saveAs(file);
    });
}

ReportService.ts

exportExcelFile(matchedRows: string, reportInfoId: number, exportExcelType:ExportExcelType): Observable<any> {
    const url = `${environment.apiUrls.v1}/reconciliationResult/${reportInfoId}/exportExcelFile?matchedRows=${matchedRows}&exportExcelType=${exportExcelType}`;
    return this.http.get(url, { observe: 'response', responseType: 'blob' });
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppRoutingModule } from './app.routing.module';
import { ReportModule } from './report/report.module';

import { AppComponent } from './app.component';
import { TopNavComponent } from './layout/topnav.component';
import { SideBarComponent } from './layout/sidebar.component';
import { DatePipe } from '@angular/common';
import { DynamicDialogModule } from 'primeng/dynamicdialog';
import { SharedModule } from './core/shared.module';
import { JwtInterceptor } from './core/_helpers/jwt.interceptor';
import { ErrorInterceptor } from './core/_helpers/error.interceptor';
import { LoginRoutingModule } from './login/login-routing.module';
import { LogingModule } from './login/login.module';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    SharedModule,
    ReportModule,
    AppRoutingModule,
    DynamicDialogModule,
    LogingModule,
    LoginRoutingModule
  ],
  declarations: [
    AppComponent,
    TopNavComponent,
    SideBarComponent
  ],
  providers: [
    DatePipe,
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }
```

Note: I'm implementing JWT. I don't know if it can have any impact on the headers.

Answer 1

Вашему серверу необходимо выставить заголовок как часть своей конфигурации CORS, используя WithExposedHeaders. Вот пример:

services
    .AddCors(options =>
    {
        options.AddPolicy(CorsAllowAllOrigins, builder => 
            builder.WithOrigins("*")
                   .WithHeaders("*")
                   .WithMethods("*")
                   .WithExposedHeaders("Content-Disposition"));
    });

Это устанавливает заголовок Access-Control-Expose-Headers .