[問題] 關於跨網讀圖片 CORS 問題

作者: nevikw39 (牧)   2019-07-13 17:47:44
板上各位大大安安,
我最近在寫一個網頁,可以讓使用者上傳多個圖片或輸入網址,讀取圖片後加到 card-
columns 裡,並利用 face-api.js 找出臉孔特徵且繪製。
上傳的部分比較容易,但在處理網址時我就碰上麻煩惹。明明設好 img 的 src 且圖片正常
顯示,但使用 faceapi.detectSingleFace(img) 就跳出 Tainted canvases may not be
loaded. 錯誤。
類似問題在之前寫插件的時候也困擾我許久,查惹半天資料還是霧煞煞,最後靠改成
faceapi.detectAllFaces(await faceapi.fetchImage(x.src)) 解決。打開 DevTools
console 試試 await fetchImage($0.src) 毫不意外地被 CORS 擋了下來。因此,我再試
await fetch($0.src, { mode: 'no-cors' }),雖然沒有報錯,status 卻為 0、blob()
size 卻也是 0,但在 network 頁面 status 都 200,preview 也正常。
請教各位大大,遇到 CORS 這種問題該怎麼處理?
感謝
網頁:
https://www.kevinweng.tk/ab/bold-training.js
https://www.kevinweng.tk/ab/bold-training.html
作者: art1 (人,原來不是人)   2019-07-14 02:15:00
原來是遮蔽韓臉的作者
作者: Sunal (SSSSSSSSSSSSSSSSSSSSSSS)   2019-07-14 08:47:00
CORS通常都是前後端要一起解決..
作者: vi000246 (Vi)   2019-07-15 17:47:00
cors是瀏覽器保護自己電腦 不要載入外部的資源我覺得與其想辨法繞過CORS 乾脆做在後端就好之前研究這問題 有找到一種解法 用自己的domain做轉址例如https://yourdomain.com/api/imageUrl這樣這樣轉一層應該不會耗太多流量https://corsproxy.github.io/

Links booklink

Contact Us: admin [ a t ] ucptt.com