S3 파일 업로드 CORS 해결

---

1. 문제 상황

1-1 CORS 에러

• Postman에서 PUT {presigned url}로 파일 업로드 테스트할 때는 문제 X
• 프론트 localhost:5173 에서 테스트 하니 위 사진처럼 CORS 에러가 터짐

---

2. 해결 방법

2-1 S3 버킷 정책 확인

• s3:PutObject 가 Allow 되어 있음을 확인 -> 문제 X

  2-2 버킷 - 권한 - CORS(Cross-origin 리소스 공유) 확인 ★★★★★

• 여기서 명시적으로 정의해주지 않아 CORS 에러가 터짐
• json 형식

  [
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:5173"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
  ]

• AllowedHeaders : ["*"] → 모든 헤더를 허용
• AllowedMethods : ["GET", "PUT", "POST", "DELETE"] → PUT 요청을 포함하여 허용
• AllowedOrigins : ["http://localhost:5173"] → 프론트 로컬 개발 환경에서 업로드 요청을 허용
• ExposeHeaders : ["ETag"] → 브라우저가 ETag를 읽을 수 있도록 허용
• MaxAgeSeconds : 3000 → Preflight 요청 결과를 캐싱(최적화)

---

3. 참고

https://sezzled.tistory.com/213
https://blog.bbubbu.me/aws-s3-presigned-url-cors-error/

---