S3 bucket - CORS 세팅해주기

교차 오리진 리소스 공유(CORS) 사용

CORS(Cross-origin 리소스 공유)는 한 도메인에서 로드되어 다른 도메인에 있는 리소스와 상호 작용하는 클라이언트 웹 애플리케이션에 대한 방법을 정의합니다. CORS 지원을 통해 Amazon S3으로 다양한 기능의 클라이언트 측 웹 애플리케이션을 구축하고, Amazon S3 리소스에 대한 Cross-Origin 액세스를 선택적으로 허용할 수 있습니다.
이 섹션에서는 CORS 개요를 다룹니다. 하위 섹션에서는 Amazon S3 콘솔을 사용하거나 프로그래밍 방식으로 Amazon S3 REST API 및 AWS SDK를 사용하여 CORS를 사용하는 방법을 설명합니다.

 

문제발생

 프로젝트를 진행하다보다니, 클라이언트 측에서 cors문제로 정상적으로 파일이 안 올라간다는 이슈가 생겼다.

 

 

해결

Amazon S3 콘솔을 사용하여 CORS 규칙 구성
Amazon S3 콘솔을 사용하여 버킷에 CORS 규칙을 구성하려면 다음 단계를 수행하세요.
1.    AWS Management Console에 로그인합니다.
2.    Amazon S3 콘솔을 엽니다.
3.    버킷을 선택합니다.
4.    [권한(Permissions)] 탭을 선택합니다.
5.    [교차 출처 리소스 공유] 창에서 [편집] 선택합니다.
6.    텍스트 상자에 활성화할 JSON CORS 규칙을 입력합니다.

 

 

1) Amazon S3에서 내가 만든 버킷을 들어가면 '권한'이 있다.

 

2) CORS(Cross-origin 리소스 공유) 라는 탭이 있다.

역시나 비워있었다.

편집을 눌러서 설정을 코드로 작성 해주어야 한다.

 

Amazon S3은 버킷의 CORS 구성을 어떻게 평가하나요?

-Amazon S3이 브라우저에서 preflight 요청을 받으면 버킷에 대한 CORS 구성을 평가하고 수신된 브라우저 요청과 일치하는 첫 번째 CORSRule 규칙을 사용하여 Cross-Origin 요청을 허용합니다. 규칙이 일치하려면 다음 조건이 충족되어야 합니다.

1. 요청의 Origin 헤더가 AllowedOrigin 요소와 일치해야 합니다.
2. 요청 메서드(예: GET 또는 PUT) 또는 Access-Control-Request-Method 헤더(preflight OPTIONS 요청의 경우)가 AllowedMethod 요소 중 하나와 일치해야 합니다.
3. preflight 요청의 Access-Control-Request-Headers 헤더에 나열된 모든 헤더가 AllowedHeader 요소와 일치해야 합니다.

 

3) 텍스트 상자에 JSON CORS 규칙을 입력합니다.

아래처럼 넣었다. (최대한 범주를 넓게 해서 빠르게 이슈를 잡기위해)

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://www.example.org"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]

참고로 Amazon S3는 GET, HEAD, PUT, POST, DELETE 메서드를 지원합니다.

 

 

 

 

 

++ 버킷 정책은 다음과 같이 설정해 주었다.

{
    "Version": "2012-10-17",
    "Id": "Policy1667287423028",
    "Statement": [
        {
            "Sid": "Stmt1667287419330",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::[버킷이름]/*"
        }
    ]
}

 

 

 

참고자료

https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/cors.html
https://repost.aws/ko/knowledge-center/s3-configure-cors