Cross-Origin Read Blocking (CORB) blocked cross-origin response 問題


問題起因

今天測試文件上傳功能,發現圖片上傳正常但無法顯示,前端瀏覽器控制台報錯如下:

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!

參考資料


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM