AWS S3에서 CORS 문제란?

📌 AWS S3에서 CORS 문제란? (쉽게 설명)

CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing) 문제는 한 웹사이트에서 다른 출처(origin)의 S3 리소스에 접근할 때 브라우저가 보안 때문에 차단하는 현상.

---

🏠 CORS 문제를 쉽게 이해하는 비유

🎭 예시: "극장 티켓 검문소"

• A라는 극장(웹사이트 1)에서 B라는 극장(웹사이트 2)의 티켓(S3의 이미지 또는 데이터)을 확인하려고 함
• 그런데 B극장(S3)이 A극장(웹사이트 1) 사람에게 티켓을 안 보여주겠다고 정책을 설정하면 A극장 관객은 티켓을 못 보고 거절당함.
• 만약 B극장(S3)이 "A극장에서 온 사람도 티켓을 볼 수 있다"는 허가(CORS 정책)를 해주면, A극장 사람도 B극장의 티켓을 확인할 수 있음.

👉 즉, CORS 문제란, S3에서 특정 웹사이트(Origin)의 요청을 허용하지 않아서 발생하는 문제.

---

💡 CORS 문제는 언제 발생할까?

✅ S3에 저장된 이미지를 웹사이트에서 직접 불러오려 할 때
✅ JavaScript(브라우저)에서 S3 데이터를 가져오려고 할 때 (fetch, XMLHttpRequest)
✅ 다른 웹사이트에서 내 S3 리소스를 요청할 때

📌 브라우저 보안 정책 때문에 기본적으로 교차 출처 요청을 차단함. 이를 해결하려면 S3에 CORS 설정을 추가해야 함.

---

🛠 CORS 문제 해결 방법 (S3 CORS 설정 추가)

S3 버킷의 CORS 설정을 수정하여 특정 웹사이트에서 리소스를 가져올 수 있도록 허용하면 됨.

1. S3 콘솔 접속 → CORS 정책을 설정할 버킷 선택
2. 권한 (Permissions) → CORS 설정 편집
3. 다음과 같은 JSON을 추가:

[
  {
    "AllowedOrigins": ["*"],  // 모든 사이트에서 접근 가능 (보안상 특정 도메인만 허용하는 게 좋음)
    "AllowedMethods": ["GET", "HEAD"],  // 허용할 HTTP 메서드 (보통 GET, HEAD)
    "AllowedHeaders": ["*"]  // 모든 헤더 허용
  }
]

📌 보안상 AllowedOrigins를 ["https://example.com"] 같은 특정 도메인으로 제한하는 것이 좋음.

---

🚀 정리

• CORS 문제는 웹사이트(브라우저)가 다른 도메인(S3 등)에서 데이터를 가져오려 할 때 차단되는 보안 정책 때문.
• 해결하려면 S3에 CORS 정책을 추가하여 특정 웹사이트가 리소스를 요청할 수 있도록 허용하면 됨.
• "AllowedOrigins": ["*"] 설정하면 모든 웹사이트에서 접근 가능하지만, 보안상 특정 도메인만 허용하는 것이 좋음.