板上各位大大安安， 我最近在写一个网页，可以让使用者上传多个图片或输入网址，读取图片後加到 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 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 106.107.240.213 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1563011274.A.432.html 推 art1: 原来是遮蔽韩脸的作者 07/14 02:15 雕虫小技，不足挂齿 XD 推 Sunal: CORS通常都是前後端要一起解决.. 07/14 08:47 s 大意思是我必须在 nginx 伺服器端做设定吗？ ※ 编辑: nevikw39 (101.137.162.123 台湾), 07/14/2019 13:00:30 等等，是资源那边的伺服器要加 headers 喔？我实作搞不太懂 CORS 的机制欸 推 satanbaby: https://www.wfublog.com/2018/11/js-cors-proxy.html 07/14 14:15 → satanbaby: 如果单纯网址的话 试试 07/14 14:15 Yahoo 的 yql 都挂，其他像是 cors.io 好像也都死惹，这种服务 484 都活不久 R → Rplus: <img crossorigin="" /> ? or google: canvas image cors 07/14 21:48 img, canvas 都有设成 crossorigin="anonymous"，现在是需要读取图片给 face-api.js 处理 ※ 编辑: nevikw39 (106.107.176.158 台湾), 07/14/2019 23:02:16 推 pm2001: 在你responce的header上面加注记就行了 07/15 01:58 p 大说的是 Access-Control-Allow-Origin 吧？可是我现在是要抓别人的图片，也不能帮 对方加 header CORS 是为了保护我的网页还是对方的资源 R? ※ 编辑: nevikw39 (101.136.159.187 台湾), 07/15/2019 09:06:46 推 pm2001: 那只能自己後端送requset抓别人的资料 单靠浏览器前端无解 07/15 11:23 → pm2001: 其实是保护网页浏览者 避免被别人随便插script捞资料 07/15 11:25 所以是怕怕前端爬虫ㄉ部分 R 看起来只能自己写 Python + flask，可是 Google Cloud 只有 1G 流量 QQ ※ 编辑: nevikw39 (101.137.22.42 台湾), 07/15/2019 15:36:16 → vi000246: cors是浏览器保护自己电脑 不要载入外部的资源 07/15 17:47 → vi000246: 我觉得与其想辨法绕过CORS 乾脆做在後端就好 07/15 17:47 推 vi000246: 之前研究这问题 有找到一种解法 用自己的domain做转址 07/15 17:57 → vi000246: 例如https://yourdomain.com/api/imageUrl这样 07/15 17:57 → vi000246: 这样转一层应该不会耗太多流量 07/15 17:57 → vi000246: https://corsproxy.github.io/ 07/15 17:59 感谢大家，先用别人的代理好惹。 弱弱请教一下，像 https://cors-anywhere.herokuapp.com/ 这种服务 fetch 的时候为 何反 而不能加 mode: 'no-cors'? ※ 编辑: nevikw39 (106.107.240.213 台湾), 07/15/2019 20:24:46 → y3k: 你只能用代理 不过这已经非常多套件可以处理了 07/18 00:13 → y3k: 这个主要是用来保护对方的网站 至少异常流量追得到 07/18 00:45 → y3k: 如果没有这个 你写一个网页或在别人论坛安插一个script去进行 07/18 00:46 → y3k: 非法的请求 对方是完全没解的 记得之前就发生不少这种案例 07/18 00:47 → y3k: 因为执行网页的人不一定是写网页的人自己 07/18 00:47 还好现在找到代理服务惹 → ssccg: 首先server端回应是否允许cors就决定在不同domain上的scrip 07/18 10:06 → ssccg: t能不能读到资源了，跟script怎麽写都没有关系 07/18 10:06 → ssccg: 然後mode: 'no-cors'是client自保的设定，不管server端是否 07/18 10:07 → ssccg: 允许cors，client的script都不能/不会存取到response内容 07/18 10:08 → ssccg: 所以不是反而不能加，是除了你存取与script相同domain上的 07/18 10:10 → ssccg: 资源(或是在自己的domain做proxy)，否则都不能加no-cors 07/18 10:10 → ssccg: 其实你从头到尾都没搞清楚cors，你以为你被cors挡下来所以 07/18 10:13 → ssccg: 想加no-cors绕过，不过把你挡下来的叫same origin policy 07/18 10:14 → ssccg: cors(cross domain resource sharing)反而是指存取跨网域资 07/18 10:14 → ssccg: 源的行为 07/18 10:14 → ssccg: 写no-cors就是自己挡自己的意思 07/18 10:16 → ssccg: 这个机制是保护以网域为单位的网站整体，包含server资源和 07/18 10:19 → ssccg: 存在client端的资料，连到别的网域可不指是下载资源，浏览 07/18 10:22 → ssccg: 器是代表使用者在该网域上的身份(cookie)去送request 07/18 10:25 → ssccg: 代理server没有使用者在该网域的资料所以没这顾虑 07/18 10:27 所以我是因为对方不允许 cross origin 的 same origin 政策被挡下来罗 我大概还是没搞懂 CORS QQ 还是感谢 s 大耐心详尽的回覆 ※ 编辑: nevikw39 (106.107.176.158 台湾), 07/18/2019 14:06:43