web-dev-qa-db-ja.com

クロスオリジンhttp.getリクエストのASP.NETWeb API2応答からAngular)で特定の応答ヘッダー(Content-Dispositionなど)を取得します

Angularサービスを介してアクセスしているときに特定のヘッダー(Content-Disposition)を取得できません。CORSが有効で、Angular HTTPClient isすべてのヘッダーを取得するように設定します。

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

ヘッダーconsole.logは次のとおりです。

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

何が足りないのですか? Content-Dispositionヘッダーを取得したいだけです。

11
Dyd666

fileController.csファイルで、Content-TypeおよびContent-Disposition応答ヘッダーを設定するとともに、 Access-Control-Expose-Headers を設定する必要があります。

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

Fetch仕様では、実際には*の値として「Access-Control-Expose-Headers」が許可されていますが(現在の仕様テキストを読んでもあまり明確ではありませんが…)、ブラウザはまだの仕様に準拠していません。それ;したがって、代わりに、ブラウザがフロントエンドJavaScriptコードに公開する必要のあるすべての応答ヘッダー名を明示的にリストする必要があります。ただし、Cache-ControlContent-LanguageContent-TypeExpiresLast-Modified、およびPragmaは、常に公開されています。これらの6つ以外の応答ヘッダー、およびAccess-Control-Expose-Headersヘッダーの値に明示的にリストされているものについては、ブラウザーはフロントエンドコードによるそれらへのアクセスをブロックします。

13
sideshowbarker