Erhalte einen spezifischen Antwortheader (z. B. Content-Disposition) in Angular aus einer ASP.NET Web API 2-Antwort für eine ursprungsübergreifende http.get-Anfrage.

Question

Ich kann keinen spezifischen Header (Content-Disposition) erhalten, wenn ich darauf zugreife über einen Angular Service. CORS ist aktiviert und der Angular HTTPClient ist so eingestellt, dass er ALLE Header abruft.

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

Hier ist der Header console.log:

[ 
    "content-type", 
    "cache-control" 
] 

Was bin ich? Ich möchte nur den Header Content-Disposition bekommen.

Answer 1

In Ihrer fileController.cs Datei zusammen mit den ContentType und ContentDisposition Response-Header Einstellung, müssen Sie Access-Control-Expose-Headers setzen:

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

Beachten Sie, dass the relevant part of the Fetch spec nicht Access-Control-Expose-Headers die "*" Wildcard als Wert zu haben erlaubt ; Stattdessen müssen Sie explizit alle Namen der Antwortheader auflisten, die der Browser für Ihren Front-End-JavaScript-Code verwenden sollte - mit Ausnahme von Cache-Control, Content-Language, Expires, und Pragma, die immer verfügbar sind. Für andere Antwortheader als diese sechs und diejenigen, die Sie explizit im Wert des Headers Access-Control-Expose-Headers aufgeführt haben, blockieren Browser den Frontendcode für den Zugriff auf diese Header.