버킷 CORS 정책 설정하기

CORS(Cross-Origin Resource Sharing)는 특정 도메인에서 실행되는 웹 애플리케이션이 다른 도메인의 자원에 접근할 수 있도록 하는 기능입니다. Object Storage 서비스의 버킷(Bucket)에 대한 CORS 정책을 설정하여 특정 도메인에만 응답하도록 옵션을 설정할 수 있습니다. 단, 스토리지 관리자 역할이 부여된 사용자만 개별 버킷의 CORS 정책을 설정할 수 있습니다. 기본 CORS 정책의 Origin은 외부 도메인으로부터의 접근을 허용하지 않습니다.
Object Storage 서비스에서 버킷에 대한 CORS 정책을 설정하는 방법은 다음과 같습니다.

안내
CORS 정책은 JSON 형식으로 입력하며, 정책의 목적에 따라 자원에 접근하도록 정의합니다. 따라서 CORS 정책 설정하기 전 반드시 버킷 CORS 정책 구성하기를 참고하시기 바랍니다.

신규 CORS 정책 설정하기

신규 CORS 정책을 설정할 수 있습니다.

안내
스토리지 관리자 역할이 부여된 사용자만 개별 버킷의 CORS 정책을 설정할 수 있습니다.

카카오 i 클라우드 콘솔에서 Object Storage 메뉴를 선택합니다.
Bucket 탭에서 정책을 설정할 버킷을 클릭합니다.
권한 탭을 클릭한 후, CORS 탭에서 하단의 JSON Editor에 정책을 입력하고 [저장] 버튼을 클릭합니다.

이미지 CORS 탭

기존 템플릿 불러오기

기존 템플릿을 불러올 수 있습니다. 하단의 기본 코드가 자동으로 입력되고, CORS 정책 기본값이 적힌 템플릿이 적용됩니다.

안내
하단의 기본 코드를 변경하여 정책을 입력합니다. 해당 코드를 그대로 사용할 경우, 사용자가 원하는 CORS 정책과 다르게 적용될 수 있습니다.

카카오 i 클라우드 콘솔에서 Object Storage 메뉴를 선택합니다.
Bucket 탭에서 템플릿을 불러올 버킷을 클릭합니다.
권한 탭을 클릭한 후, CORS 탭에서 [템플릿 불러오기] 버튼을 클릭합니다.

코드 예제 템플릿 불러오기의 기본 코드

{
  "cors": [
    {
      "allowed_origins": [
        "http://example.com",
        "http://example.com:8080",
        "https://example.com",
        "http://*.example.com"
      ],
      "allowed_methods": [
        "GET",
        "HEAD"
      ],
      "allowed_headers": [
        "X-Auth-Token" 
        ],
        "expose_headers": [
          "Access-Control-Allow-Origin"
        ],
        "max_age_seconds": 0
      }
    ]
  }

기존 정책 불러오기

프로젝트 내 다른 버킷에 설정된 CORS 정책을 불러와 현재 버킷에서 편집할 수 있습니다.

안내
사용자가 프로젝트 내 다른 버킷에 대한 스토리지 관리자 역할을 가지고, 해당 버킷에 CORS 정책이 적용되어 있어야만 정책을 불러올 수 있습니다.

카카오 i 클라우드 콘솔에서 Object Storage 메뉴를 선택합니다.
Bucket 탭에서 기존 정책을 불러올 버킷을 클릭합니다.
권한 탭을 클릭한 후, CORS 탭에서 [기존 정책 불러오기] 버튼을 클릭합니다.
기존 정책 불러오기 팝업창에서 정보를 입력하고, [불러오기] 버튼을 클릭합니다.

이미지 기존 정책 불러오기

정책 적용하기

버킷에 CORS 정책을 적용할 수 있습니다.

카카오 i 클라우드 콘솔에서 Object Storage 메뉴를 선택합니다.
Bucket 탭에서 정책을 적용할 버킷을 클릭합니다.
권한 탭을 클릭한 후, CORS 탭의 JSON Editor에서 JSON 형식에 맞게 정책을 입력하고 [저장] 버튼을 클릭합니다.
- [변경 사항 실행 취소] 버튼을 클릭하면 정책을 입력하기 전으로 되돌릴 수 있습니다.
이미지 JSON Editor
CORS 정책 설정 팝업창에서 변경된 사항을 확인하고, [확인] 버튼을 클릭합니다.

정책 수정하기

버킷에 적용된 CORS 정책을 수정할 수 있습니다. 단, CORS 정책을 수정 시 다른 Origin 사이에 진행 중이던 리소스 공유가 차단될 수 있습니다.

카카오 i 클라우드 콘솔에서 Object Storage 메뉴를 선택합니다.
Bucket 탭에서 정책을 수정할 버킷을 클릭합니다.
권한 탭을 클릭한 후, CORS 탭의 JSON Editor에서 JSON 형식에 맞게 정책을 입력하고 [저장] 버튼을 클릭합니다.

이미지 JSON Editor
CORS 정책 설정 팝업창에서 정보를 확인하고, [확인] 버튼을 클릭합니다.

이미지 JSON Editor

정책 삭제하기

버킷에 적용된 CORS 정책을 삭제할 수 있습니다. 단, CORS 정책을 삭제할 시 다른 Origin 사이에 진행 중이던 리소스 공유가 차단됩니다.

카카오 i 클라우드 콘솔에서 Object Storage 메뉴를 선택합니다.
Bucket 탭에서 정책을 삭제할 버킷을 클릭합니다.
권한 탭을 클릭한 후, CORS 탭에서 CORS 정책을 적용 중 인지 확인합니다.
CORS 정책 삭제 팝업창에서 [삭제] 버튼을 클릭합니다.

이미지 JSON Editor
정책이 삭제되고, CORS 정책의 적용 상태가 미적용인지 확인합니다.

CORS 정책 구성 예시

CORS 정책 구성은 JSON 형식이어야 하고, 최대 10개까지 설정할 수 있습니다. End-point를 사용하여 웹사이트에 액세스하는 대신, “example1.com”과 같은 자체 도메인을 사용하여 콘텐츠를 제공할 수 있습니다. 정책 구성에 대한 자세한 설명은 버킷 CORS 정책 구성하기를 참고하시기 바랍니다.

CORS 정책 구성 예시에는 다음과 같이 CORS 정책 규칙 2개가 적용되어 있습니다.

규칙	설명
규칙 1	- https://example.com, *http://.example.com Origin에서 cross-origin GET, HEAD, PUT 요청을 허용 - Access-Control-Request-Headers 헤더를 통해 Preflight OPTIONS 요청의 X-Auth-Token**만 허용 - Preflight OPTIONS 요청에 대한 응답으로 요청된 헤더를 반환
규칙 2	모든 Origin에서 cross-origin POST 요청을 허용 - `*`(wildcard)는 모든 Origin을 의미

코드 예제 CORS 정책 구성 예시

{
  "cors": [
    {
      "allowed_origins": [
        "https://example.com",
        "http://*.example.com"
      ],
      "allowed_methods": [
        "GET",
        "HEAD",
        "PUT"
      ],
      "allowed_headers": [
        "X-Auth-Token"
      ],
      "expose_headers": [
        "Access-Control-Allow-Origin"
      ],
      "max_age_seconds": 5
    },
    {
      "allowed_origins": [
        "*"
      ],
      "allowed_methods": [
        "POST",
      ],
      "allowed_headers": [ ],
      "expose_headers": [ ]
    }
  ]
}