[트러블 슈팅] AWS s3 이미지 깨지는 현상

 

 

 

🚨 발생한 문제와 상황

---

 

이미지를 Get해서 읽어올 때 다음과 같은 문제 발생

 

 

 

Request URL:
<https://hm-s3.s3.ap-northeast-2.amazonaws.com/uploads/886e115c-d25f-436e-bfa0-e73dd42b0858_%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-02>
Request Method:
GET
Status Code:
403 Forbidden
Referrer Policy:
strict-origin-when-cross-origin
content-type:
application/xml
date:
Sat, 15 Feb 2025 13:08:43 GMT
server:
AmazonS3
transfer-encoding:
chunked
x-amz-id-2:
BIw5J4DrAOJaj2DyehR/S20GPFi1PLt2rp/T35xPKemOTLoBETud4npSoVKjachfdbuMu3isJwBs8K67jo5ZJtk0IBCNXXwz
x-amz-request-id:
BS7P27Z9DFXKKH4H
accept:
image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
accept-encoding:
gzip, deflate, br, zstd
accept-language:
ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
connection:
keep-alive
host:
hm-s3.s3.ap-northeast-2.amazonaws.com
referer:

sec-ch-ua:
"Google Chrome";v="131", "Chromium";v="131", "Not_A Brand";v="24"
sec-ch-ua-mobile:
?1
sec-ch-ua-platform:
"Android"
sec-fetch-dest:
image
sec-fetch-mode:
no-cors
sec-fetch-site:
cross-site
user-agent:
Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

 

 

🤔 문제의 원인 파악하기

---

1. S3 버킷 및 객체 권한 문제
   • 기본적으로 S3 객체는 비공개이며, s3:GetObject 권한이 없으면 403 Forbidden 오류 발생.
   • 개별 파일에 퍼블릭 읽기 권한이 없을 수도 있음.
2. CORS 정책 문제
   • 프론트엔드 도메인이 S3의 CORS 설정에 허용되지 않으면 요청이 차단될 수 있음.
3. URL 인코딩 문제
   • 파일명에 한글 등 특수문자가 포함되었고, 인코딩이 제대로 되지 않으면 접근 불가.
4. Signed URL 필요 여부
   • 퍼블릭 접근이 제한된 경우, 서버에서 Signed URL을 생성해야 할 수도 있음.
5. 잘못된 URL 요청 가능성
   • 프론트에서 요청하는 URL이 올바른지 확인 필요.

 

 

 

 

 

🏃🏻‍♀️ 시도해본 방법

---

 

 CORS 설정 추가

 

CORS 문제로 인해 S3에서 리소스가 차단될 수도 있다

아래 CORS 정책을 적용하면 해결 가능하다. 

 

 

 

🔹 CORS 설정 추가 방법

1. AWS 콘솔 → S3 접속
2. hm-s3 버킷 선택
3. [권한(Permissions)] → [CORS 설정] 섹션으로 이동
4. 아래의 CORS 정책 추가 후 저장

 

 

 

✅ 결론

---

 

• ✅ 버킷 정책에서 "s3:GetObject"만 허용하도록 수정
• ✅ 개별 객체(파일)에 퍼블릭 읽기 권한 부여
• ✅ 프론트엔드에서 올바른 URL을 요청하는지 확인
• ✅ S3 CORS 설정 추가하여 프론트엔드 접근 허용

cors 설정 중요함….

 

 

참고한 블로그 

 

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏