筆者使用 ASP.NET Core 6 建立後端程式,讓使用者可以下載檔案。本來一切正常,但是突然要使用 axios 接收檔案,檔案很容易就抓到,但是檔名卻一直錯誤。
檔名通常會放在 header 的 Content-Disposition 中,在使用瀏覽器中的 F12 開發人員工具都有看到,使用 Postman 也一樣,但是使用 axios 抓取時 header 卻只有三個,一直沒有看到 Content-Disposition。
奮鬥許久,突然想到之前寫的一篇 呼叫 API 發生 CORS 錯誤的原因和 ASP.NET Core 6 的解決方式 ,也是使用瀏覽器中的 F12 開發人員工具和 Postman 都能夠取得資料,但是使用 Axios 就不能。
莫非,這也是因為 CORS?!
經過一翻研究,沒錯,又是 CORS 在搞我(其實是自己菜)!因為在上一篇我們已經設定允許跨來源請求,所以現在只要再加上一行就可以讓瀏覽器放行 Content-Disposition 這個 header,讓網頁順利讀取到檔案名稱!
檔名通常會放在 header 的 Content-Disposition 中,在使用瀏覽器中的 F12 開發人員工具都有看到,使用 Postman 也一樣,但是使用 axios 抓取時 header 卻只有三個,一直沒有看到 Content-Disposition。
奮鬥許久,突然想到之前寫的一篇 呼叫 API 發生 CORS 錯誤的原因和 ASP.NET Core 6 的解決方式 ,也是使用瀏覽器中的 F12 開發人員工具和 Postman 都能夠取得資料,但是使用 Axios 就不能。
莫非,這也是因為 CORS?!
經過一翻研究,沒錯,又是 CORS 在搞我(其實是自己菜)!因為在上一篇我們已經設定允許跨來源請求,所以現在只要再加上一行就可以讓瀏覽器放行 Content-Disposition 這個 header,讓網頁順利讀取到檔案名稱!
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(builder =>
{
builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.WithExposedHeaders("Content-Disposition");
});
});
非常感謝﹐你解決了我的困擾﹐只是微軟這設計真奇怪﹐明明已經 AllowAnyHeader了卻還要另外設定﹐看來 Any 不一定是 Any
回覆刪除