본문 바로가기
Q&A2026년 7월 7일1분 읽기

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

s
s3_haeun
조회 945댓글 1

프로필 이미지를 S3에 올리고 <img>랑 canvas로 불러오는데, canvas에서 이미지를 다룰 때 콘솔에 이렇게 뜹니다.

Access to image at 'https://...s3...' from origin 'https://myapp.com'
has been blocked by CORS policy

이상한 건 <img>로 그냥 보여주는 건 잘 되는데, canvas에 그리거나 crossorigin으로 가져오면 막힙니다. S3 버킷은 public read로 열어놨는데도요. 뭐가 문제일까요?

이전 글
쿠버네티스에서 Node 파드가 새벽마다 OOMKilled 됩니다
다음 글
PostgreSQL이 too many connections로 터집니다 (FATAL: sorry, too many clients)

댓글 1

김김영삼3개월 전

딱 짚으셨어요 — 단순히 보여주는 것과 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 = () => ctx.drawImage(img, 0, 0)
흔한 함정 — 캐시

CORS 설정 전에 이미 crossorigin 없이 불러온 이미지가 브라우저·CloudFront에 캐시돼 있으면, 설정 후에도 캐시된 (CORS 헤더 없는) 응답이 나와서 계속 막힙니다. 쿼리스트링을 붙여 캐시를 우회해 테스트하거나, CloudFront를 쓰면 캐시를 무효화하세요. 이거 때문에 "설정 했는데 왜 안 되지" 하고 한참 헤매는 분들 많습니다.

Ctrl+Enter로 등록