[问题] 关于跨网读图片 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