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
ヘッダーを取得したいだけです。
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-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、およびPragma
は、常に公開されています。これらの6つ以外の応答ヘッダー、およびAccess-Control-Expose-Headers
ヘッダーの値に明示的にリストされているものについては、ブラウザーはフロントエンドコードによるそれらへのアクセスをブロックします。