問題起因
今天測試文件上傳功能,發現圖片上傳正常但無法顯示,前端瀏覽器控制台報錯如下:
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://minio.xs.com/minio/default/a/111.jpg with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
部署環境
操作系統:Centos7 Linux 系統
部署方式:Rancher + Kubernates Ingress + MinIO
部署版本:Rancher 2.3.6、Kubernate Client 1.16.1、Kubernate Server 1.17.4、MinIO 2019-10-12T01:39:57Z
問題描述
圖片上傳成功,但無法顯示,如下圖。
解決過程
排除文件上傳問題
首先,我將圖片地址到地址欄,直接訪問圖片地址,發現直接訪問跳轉到 MinIO 的 UI 界面,文件上傳成功,MinIO 服務中存在該文件。
定位圖片展示問題
然后,我打開瀏覽器調試工具,選中圖片,將圖片地址直接放在標簽內訪問。
<img src="http://minio.xs.com/minio/default/a/111.jpg">
由於直接訪問地址,應該不會存在跨域問題,但圖片依舊無法顯示。
再使用 MinIO 中 Share Object 功能生成分享鏈接,依舊放入標簽內訪問。
<img src="http://minio.xs.com/default/a/111.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=xs%2F20210308%2F%2Fs3%2Faws4_request&X-Amz-Date=20210308T084710Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=220fde35c7053a32bc9837632zfabc7b3d632b2d1efb2a43e83a4e03b8689dd1">
此時,發現圖片可以正常顯示。
猜測和溝通
那么,這時我猜測是 MinIO 訪問控制導致的,而我了解到,就在今天上午,我們的運維小伙伴剛剛將 MinIO 從 Rancher 中遷移出來,做了獨立部署。
再仔細一看錯誤信息:with MIME type text/html
。哦!為什么請求圖片返回的是文本信息?
此時,我更加確信了自己的猜測,應該是在訪問 MinIO 圖片的時候,發現權限不足,返回了錯誤的 Html 信息,所以圖片才會無法展示。
修改 MinIO 訪問權限
進入 MinIO 的 UI 界面中,鼠標放在左側目錄,點擊右側出現的三個小白點。
選擇 Edit policy
,彈出權限設置頁面。
在彈出頁面的第二列,選擇 Read and Write
后,點擊 Add
按鈕,完成權限設置。
再次訪問頁面,發現圖片已經可以正常展示了。
解決方案
登錄 MinIO UI 界面,添加或修改 MinIO 文件訪問權限為 Read and Write
,即可解決。
總結
如果遇到 CORB 問題,那就說明調用接口的實際返回結果和預期不符,需要分析為什么會出現異常的返回值。就如本例中,請求了一張圖片,但由於權限問題導致無法訪問,接口返回了 text/html
的文本信息,這種報錯信息在現在的系統中非常常見,仔細分析就能找到原因。
So, Good Luck! Guys!