교차 출처 리소스 공유(CORS) 구성

교차 출처 리소스 공유(CORS)는 출처가 서로 다른 리소스 간의 상호작용을 허용하는 메커니즘입니다. 일반적으로 이러한 상호작용은 악의적인 행동을 방지하기 위해 금지되어 있습니다. 이 주제를 통해 Cloud Storage 버킷에서 CORS를 구성하는 방법에 대해 알아보세요.

Cloud Storage CORS 지원에 대한 자세한 내용은 교차 출처 리소스 공유(CORS)를 참조하세요.

버킷에 CORS 구성

수락할 요청의 유형을 식별하는 정보(HTTP 메소드, 출처 도메인 등)를 지정함으로써 버킷에 CORS 구성을 설정합니다. gsutil 명령줄 도구, XML API, JSON API 또는 Cloud Storage용 클라이언트 라이브러리를 사용하여 버킷에 CORS 구성을 설정할 수 있습니다.

다음 예에서는 example-bucket이라는 버킷에 CORS를 구성하는 방법을 보여줍니다. 각 예에서 CORS 구성을 다음과 같이 설정합니다.

example.appspot.com에서 발생한 요청을 허용합니다.
GET , HEAD 또는 DELETE HTTP 메소드를 사용하는 요청을 허용합니다.
Content-Type 응답 헤더를 출처에서 공유하도록 허용합니다.
실행 전 요청의 경우, 브라우저에서 3600초(1시간) 동안 요청한 후 실행 전 요청을 반복하도록 허용합니다.

gsutil

gsutil cors 명령어를 사용하여 버킷에 CORS를 구성합니다.

gsutil cors set cors-json-file.json gs://example-bucket

여기서 cors-json-file.json은 다음을 포함하는 로컬 파일입니다.

[
    {
      "origin": ["http://example.appspot.com"],
      "responseHeader": ["Content-Type"],
      "method": ["GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

gsutil cors 명령어를 사용하여 버킷의 CORS 구성을 가져올 수도 있습니다.

gsutil cors get gs://example-bucket

클라이언트 라이브러리

버킷의 CORS 구성을 프로그래밍 방식으로 설정하거나 가져오려면 Cloud Storage의 클라이언트 라이브러리 중 하나를 사용하세요. 다음 참조 콘텐츠를 사용하여 시작하세요.

Go 참조: type BucketHandle
자바 참조: Class Cors
Node.js: Bucket
PHP 참조e: Google\Cloud\Storage\StorageClient
Python 참조: cors
Ruby 참조: Google::Cloud::Storage

REST API

JSON API

JSON API의 Buckets: insert 메소드를 사용하여 새 버킷에서 CORS를 구성하거나 Buckets: patch 메소드를 사용하여 기존 버킷에서 CORS를 구성합니다. 다음 예에서는 Buckets: patch 메소드를 사용하는 방법을 보여줍니다.

PATCH /storage/v1/b/example-bucket?fields=cors HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg
content-length: 132
accept: application/json
accept-encoding: gzip, deflate
content-type: application/json

{
  "location": "us-east-1",
  "storageClass": "regional",
  "cors": [
      {
          "maxAgeSeconds": "3600",
          "method": [
             "GET"
             "HEAD"
             "DELETE"
          ],
          "origin": [
             "http://example.appspot.com"
          ],
          "responseHeader":[
            "Content-Type"
         ]
      }
  ]
}

Buckets: get 메소드를 사용하여 버킷의 CORS 구성을 가져올 수 있습니다.

GET https://www.googleapis.com/storage/v1/b/example-bucket
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

XML API

XML API의 Set Bucket CORS 메소드를 사용하여 버킷에서 CORS를 구성합니다.

PUT http://storage.googleapis.com/example-bucket?cors HTTP/1.1
Host: storage.googleapis.com
Content-Length: 412
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>http://example.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>HEAD</Method>
      <Method>DELETE</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

Get Bucket CORS 메소드를 사용하여 버킷의 CORS 구성을 가져올 수 있습니다.

GET http://storage.googleapis.com/example-bucket?cors HTTP/1.1
Host: storage.googleapis.com
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

CORS 요청 문제해결

다른 출처에서 Cloud Storage 버킷에 액세스할 때 예상치 못한 동작이 발생할 경우 다음 단계를 시도하세요.

대상 버킷에서 gsutil cors get을 사용하여 해당 CORS 구성을 가져옵니다. CORS 구성 항목이 여러 개 있는 경우에는 다음 단계를 진행하는 동안 요청 값이 같은 단일 CORS 구성 항목의 값에 매핑되어야 합니다.
원하는 도구를 사용하여 요청 및 응답을 검토합니다. Chrome 브라우저에서는 표준 개발자 도구를 사용하여 이 정보를 볼 수 있습니다.
1. 브라우저 툴바에서 Chrome 메뉴 을 클릭합니다.
2. 도구 더 보기 > 개발자 도구를 선택합니다.
3. 네트워크 탭을 클릭합니다.
4. 애플리케이션이나 명령줄에서 요청을 보냅니다.
5. 네트워크 활동을 표시하는 창에서 요청을 찾습니다.
6. 이름 열에서 요청에 해당하는 이름을 클릭합니다.
7. 응답 헤더를 보려면 헤더 탭을 클릭하고, 응답 내용을 보려면 응답 탭을 클릭합니다.
응답 및 요청이 보이지 않으면 이전에 실패한 실행 전 요청 시도를 브라우저가 캐시한 것일 수도 있습니다. 브라우저의 캐시를 지우면 실행 전 캐시도 지워야 합니다. 그렇지 않는 경우에는 CORS 구성에 있는 MaxAgeSec 값을 좀더 낮은 값으로 설정하고(지정되지 않은 경우 기본값은 1800(30분)), 이전 MaxAgeSec의 시간만큼 기다린 후, 요청을 다시 시도합니다. 그러면 새로운 CORS 구성을 가져오고 캐시 항목을 삭제하는 새로운 실행 전 요청이 수행됩니다. 문제를 디버그한 후에는 MaxAgeSec를 다시 더 높은 값으로 올려서 버킷에 대한 실행 전 트래픽을 줄입니다.
요청에 Origin 헤더가 있고, 헤더 값이 버킷의 CORS 구성에 있는 Origins 값 중 적어도 하나와 일치하는지 확인합니다. 스키마, 호스트, 포트의 값이 정확히 일치해야 합니다. 허용되는 일치의 몇 가지 예는 다음과 같습니다.
- http://origin.example.com은 http://origin.example.com:80과 일치하지만(80이 기본 HTTP 포트이기 때문) https://origin.example.com, http://origin.example.com:8080, http://origin.example.com:5151, http://sub.origin.example.com과는 일치하지 않습니다.
- https://example.com:443은 https://example.com과 일치하지만 http://example.com 또는 http://example.com:443과는 일치하지 않습니다.
- http://localhost:8080은 오직 http://localhost:8080과 정확히 일치하고 http://localhost:5555 또는 http://localhost.example.com:8080과는 일치하지 않습니다.
요청의 HTTP 메소드(간단한 요청의 경우) 또는 Access-Control-Request-Method에 지정된 메소드(실행 전 요청의 경우)가 버킷의 CORS 구성에 있는 Methods 값 중 적어도 하나와 일치하는지 확인합니다.
실행 전 요청의 경우에는 하나 이상의 Access-Control-Request-Header 헤더를 포함하고 있는지 확인합니다. 포함하고 있으면 각 Access-Control-Request-Header 값이 버킷의 CORS 구성에 있는 ResponseHeader 값과 일치하는지 확인합니다. 실행 전 요청이 성공하고 응답에 CORS 헤더가 포함되도록 Access-Control-Request-Header에서 이름이 지정된 모든 헤더가 CORS 구성에 있어야 합니다.

이 페이지가 도움이 되었나요? 평가를 부탁드립니다.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

8월 1, 2019에 마지막으로 업데이트되었습니다.