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

看板Web_Design作者nevikw39 (☆牜攵☆犬羊)時間5年前 (2019/07/13 17:47)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串1/1

板上各位大大安安，我最近在寫一個網頁，可以讓使用者上傳多個圖片或輸入網址，讀取圖片後加到 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://www.ptt.cc/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