S3에 올린 이미지가 브라우저에서 CORS 에러로 안 보입니다

Question

프로필 이미지를 S3에 올리고 랑 canvas로 불러오는데, canvas에서 이미지를 다룰 때 콘솔에 이렇게 뜹니다.Access to image at 'https://...s3...' from origin 'https://myapp.com' has been blocked by CORS policy이상한 건 로 그냥 보여주는 건 잘 되는데, canvas에 그리거나 crossorigin으로 가져오면 막힙니다. S3 버킷은 public read로 열어놨는데도요. 뭐가 문제일까요?

김영삼 · Accepted Answer

딱 짚으셨어요 — 단순히 보여주는 것과 canvas/JS로 픽셀에 접근하는 것은 CORS 요구가 다릅니다. <img> 표시는 CORS 없이도 되지만, canvas에 그려서 데이터를 읽으려면 서버(S3)가 CORS 헤더로 허락해줘야 합니다. public read(버킷 정책)와 CORS는 별개 설정이에요.1. S3 버킷에 CORS 설정 추가버킷 → 권한 → CORS에 넣으세요.[ { "AllowedOrigins": ["https://myapp.com"], "AllowedMethods": ["GET", "HEAD"], "AllowedHeaders": ["*"], "MaxAgeSeconds": 3000 } ]2. img 태그에 crossorigin 명시const img = new Image() img.crossOrigin = 'anonymous' // 이게 있어야 CORS 요청을 보냄 img.src = 'https://...s3.../profile.png' img.onload =

댓글 0