728x90
🚨 발생한 문제와 상황
이미지를 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
🤔 문제의 원인 파악하기
- S3 버킷 및 객체 권한 문제
- 기본적으로 S3 객체는 비공개이며, s3:GetObject 권한이 없으면 403 Forbidden 오류 발생.
- 개별 파일에 퍼블릭 읽기 권한이 없을 수도 있음.
- CORS 정책 문제
- 프론트엔드 도메인이 S3의 CORS 설정에 허용되지 않으면 요청이 차단될 수 있음.
- URL 인코딩 문제
- 파일명에 한글 등 특수문자가 포함되었고, 인코딩이 제대로 되지 않으면 접근 불가.
- Signed URL 필요 여부
- 퍼블릭 접근이 제한된 경우, 서버에서 Signed URL을 생성해야 할 수도 있음.
- 잘못된 URL 요청 가능성
- 프론트에서 요청하는 URL이 올바른지 확인 필요.
🏃🏻♀️ 시도해본 방법
CORS 설정 추가
CORS 문제로 인해 S3에서 리소스가 차단될 수도 있다
아래 CORS 정책을 적용하면 해결 가능하다.
🔹 CORS 설정 추가 방법
- AWS 콘솔 → S3 접속
- hm-s3 버킷 선택
- [권한(Permissions)] → [CORS 설정] 섹션으로 이동
- 아래의 CORS 정책 추가 후 저장
✅ 결론
- ✅ 버킷 정책에서 "s3:GetObject"만 허용하도록 수정
- ✅ 개별 객체(파일)에 퍼블릭 읽기 권한 부여
- ✅ 프론트엔드에서 올바른 URL을 요청하는지 확인
- ✅ S3 CORS 설정 추가하여 프론트엔드 접근 허용
cors 설정 중요함….
참고한 블로그
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이
inpa.tistory.com
728x90
'⚡트러블 슈팅' 카테고리의 다른 글
[트러블 슈팅] AWS SDK와 Multer-S3 호환성 문제 발생 (0) | 2025.03.03 |
---|---|
[트러블 슈팅] Prisma mode: "insensitive" 옵션의 MySQL 미지원 문제 (0) | 2025.03.03 |