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

개념으로 이동

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

버킷에 CORS 구성

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

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

• example.appspot.com에서 발생하는 요청을 허용합니다.
• GET HTTP 메서드를 사용하는 요청을 허용합니다.
• 출처 간에 Content-Type 응답 헤더가 공유되도록 허용합니다.

• 실행 전 요청의 경우, 브라우저에서 3,600초(1시간) 동안 요청한 후 실행 전 요청을 반복하도록 허용합니다.

gsutil

1. 다음을 포함하는 JSON 파일을 만듭니다.

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

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

   gsutil cors set [JSON_FILE_NAME].json gs://[BUCKET_NAME]

   각 항목의 의미는 다음과 같습니다.

   • [JSON_FILE_NAME]은 1단계에서 만든 JSON 파일의 경로입니다.
   • [BUCKET_NAME]은 버킷의 이름입니다. 예를 들면 my-bucket입니다.

코드 샘플

C++

자세한 내용은 Cloud Storage C++ API 참조 문서를 확인하세요.

GitHub에서 보기 의견 보내기

namespace gcs = google::cloud::storage;
using ::google::cloud::StatusOr;
[](gcs::Client client, std::string const& bucket_name,
   std::string const& origin) {
  StatusOr<gcs::BucketMetadata> original =
      client.GetBucketMetadata(bucket_name);

  if (!original) throw std::runtime_error(original.status().message());
  std::vector<gcs::CorsEntry> cors_configuration;
  cors_configuration.emplace_back(
      gcs::CorsEntry{3600, {"GET"}, {origin}, {"Content-Type"}});

  StatusOr<gcs::BucketMetadata> patched_metadata = client.PatchBucket(
      bucket_name,
      gcs::BucketMetadataPatchBuilder().SetCors(cors_configuration),
      gcs::IfMetagenerationMatch(original->metageneration()));

  if (!patched_metadata) {
    throw std::runtime_error(patched_metadata.status().message());
  }

  if (patched_metadata->cors().empty()) {
    std::cout << "Cors configuration is not set for bucket "
              << patched_metadata->name() << "\n";
    return;
  }

  std::cout << "Cors configuration successfully set for bucket "
            << patched_metadata->name() << "\nNew cors configuration: ";
  for (auto const& cors_entry : patched_metadata->cors()) {
    std::cout << "\n  " << cors_entry << "\n";
  }
}

자바

자세한 내용은 Cloud Storage 자바 API 참조 문서를 확인하세요.

GitHub에서 보기 의견 보내기

import com.google.cloud.storage.Bucket;
import com.google.cloud.storage.Cors;
import com.google.cloud.storage.HttpMethod;
import com.google.cloud.storage.Storage;
import com.google.cloud.storage.StorageOptions;
import com.google.common.collect.ImmutableList;

public class ConfigureBucketCors {
  public static void configureBucketCors(
      String projectId,
      String bucketName,
      String origin,
      String responseHeader,
      Integer maxAgeSeconds) {
    // The ID of your GCP project
    // String projectId = "your-project-id";

    // The ID of your GCS bucket
    // String bucketName = "your-unique-bucket-name";

    // The origin for this CORS config to allow requests from
    // String origin = "http://example.appspot.com";

    // The response header to share across origins
    // String responseHeader = "Content-Type";

    // The maximum amount of time the browser can make requests before it must repeat preflighted
    // requests
    // Integer maxAgeSeconds = 3600;

    Storage storage = StorageOptions.newBuilder().setProjectId(projectId).build().getService();
    Bucket bucket = storage.get(bucketName);

    // See the HttpMethod documentation for other HTTP methods available:
    // https://cloud.google.com/appengine/docs/standard/java/javadoc/com/google/appengine/api/urlfetch/HTTPMethod
    HttpMethod method = HttpMethod.GET;

    Cors cors =
        Cors.newBuilder()
            .setOrigins(ImmutableList.of(Cors.Origin.of(origin)))
            .setMethods(ImmutableList.of(method))
            .setResponseHeaders(ImmutableList.of(responseHeader))
            .setMaxAgeSeconds(maxAgeSeconds)
            .build();

    bucket.toBuilder().setCors(ImmutableList.of(cors)).build().update();

    System.out.println(
        "Bucket "
            + bucketName
            + " was updated with a CORS config to allow GET requests from "
            + origin
            + " sharing "
            + responseHeader
            + " responses across origins");
  }
}

C#

자세한 내용은 Cloud Storage C# API 참조 문서를 확인하세요.

현재는 C# 클라이언트 라이브러리를 사용하여 CORS를 구성할 수 없습니다.

Go

자세한 내용은 Cloud Storage Go API 참조 문서를 확인하세요.

Go를 사용하여 버킷의 CORS 구성을 설정하려면 CORS 참조 문서를 참조하세요.

Node.js

자세한 내용은 Cloud Storage Node.js API 참조 문서를 확인하세요.

NodeJS를 사용하여 버킷의 CORS 구성을 설정하려면 버킷 참조 문서를 참조하세요.

PHP

자세한 내용은 Cloud Storage PHP API 참조 문서를 확인하세요.

PHP를 사용하여 버킷의 CORS 구성을 설정하려면 Google\Cloud\Storage\Bucket 참조 문서를 참조하세요.

Python

자세한 내용은 Cloud Storage Python API 참조 문서를 확인하세요.

Python을 사용하여 버킷에 대해 CORS 구성을 설정하려면 CORS 참조 문서를 참조하세요.

Ruby

자세한 내용은 Cloud Storage Ruby API 참조 문서를 확인하세요.

Ruby를 사용하여 버킷의 CORS 구성을 설정하려면 Google::Cloud::Storage 참조 문서를 확인하세요.

REST API

JSON API

1. OAuth 2.0 Playground에서 승인 액세스 토큰을 가져옵니다. OAuth 사용자 인증 정보를 사용하도록 Playground를 구성합니다.

2. 다음을 포함하는 JSON 파일을 만듭니다.

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

3. cURL을 사용하여 PATCH 버킷 요청으로 JSON API를 호출합니다.

   curl --request PATCH \
   'https://storage.googleapis.com/storage/v1/b/[BUCKET_NAME]' \
   --header 'Authorization: Bearer [OAUTH2_TOKEN]' \
   --header 'Content-Type: application/json' \
   --data-binary @[JSON_FILE_NAME].json

   각 항목의 의미는 다음과 같습니다.

   • [BUCKET_NAME]은 버킷의 이름입니다. 예를 들면 my-bucket입니다.
   • [OAUTH2_TOKEN]은 1단계에서 생성한 액세스 토큰입니다.
   • [JSON_FILE_NAME]은 2단계에서 만든 파일의 경로입니다.

XML API

1. OAuth 2.0 Playground에서 승인 액세스 토큰을 가져옵니다. OAuth 사용자 인증 정보를 사용하도록 Playground를 구성합니다.

2. 다음을 포함하는 XML 파일을 만듭니다.

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

3. cURL을 사용하여 Set Bucket CORS 요청으로 XML API를 호출합니다.

   curl -X PUT --data-binary @[XML_FILE_NAME].xml \
   -H "Authorization: Bearer [OAUTH2_TOKEN]" \
   -H "x-goog-project-id: [PROJECT_ID]" \
   "https://storage.googleapis.com/[BUCKET_NAME]?cors"

   각 항목의 의미는 다음과 같습니다.

   • [BUCKET_NAME]은 버킷의 이름입니다. 예를 들면 my-bucket입니다.
   • [OAUTH2_TOKEN]은 1단계에서 생성한 액세스 토큰입니다.
   • [PROJECT_ID]는 버킷과 연결된 프로젝트의 ID입니다. 예를 들면 my-project입니다.
   • [XML_FILE_NAME]은 2단계에서 만든 파일의 경로입니다.

버킷의 CORS 구성 보기

버킷의 CORS 구성을 보려면 다음 안내를 따르세요.

gsutil

gsutil cors 명령어를 사용하여 버킷의 CORS 구성을 가져옵니다.

gsutil cors get gs://[BUCKET_NAME]

여기서 [BUCKET_NAME]은 버킷의 이름입니다. 예를 들면 my-bucket입니다.

코드 샘플

클라이언트 라이브러리를 사용하여 버킷의 CORS 구성을 보려면 버킷 메타데이터 표시의 안내에 따라 응답에서 CORS 필드를 찾습니다.

REST API

JSON API

1. OAuth 2.0 Playground에서 승인 액세스 토큰을 가져옵니다. OAuth 사용자 인증 정보를 사용하도록 플레이그라운드를 구성합니다.

2. cURL을 사용하여 GET 버킷 요청으로 JSON API를 호출합니다.

   curl -X GET \
   -H "Authorization: Bearer [OAUTH2_TOKEN]" \
   "https://storage.googleapis.com/storage/v1/b/[BUCKET_NAME]?fields=cors"

   각 항목의 의미는 다음과 같습니다.

   • [OAUTH2_TOKEN]은 1단계에서 생성한 액세스 토큰의 이름입니다.
   • [BUCKET_NAME]은 관련 버킷의 이름입니다. 예를 들면 my-bucket입니다.

XML API

1. OAuth 2.0 Playground에서 승인 액세스 토큰을 가져옵니다. OAuth 사용자 인증 정보를 사용하도록 플레이그라운드를 구성합니다.

2. cURL을 사용하여 GET 버킷 요청으로 XML API를 호출합니다.

   curl -X GET \
   -H "Authorization: Bearer [OAUTH2_TOKEN]" \
   "https://storage.googleapis.com/[BUCKET_NAME]?cors"

   각 항목의 의미는 다음과 같습니다.

   • [OAUTH2_TOKEN]은 1단계에서 생성한 액세스 토큰의 이름입니다.
   • [BUCKET_NAME]은 관련 버킷의 이름입니다. 예를 들면 my-bucket입니다.

버킷에서 CORS 삭제

버킷에서 CORS 구성을 삭제하려면 다음 안내를 따르세요.

gsutil

1. 다음을 포함하는 JSON 파일을 만듭니다.

   []

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

   gsutil cors set [JSON_FILE_NAME].json gs://[BUCKET_NAME]

   각 항목의 의미는 다음과 같습니다.

   • [JSON_FILE_NAME]은 1단계에서 만든 JSON 파일의 경로입니다.
   • [BUCKET_NAME]은 버킷의 이름입니다. 예를 들면 my-bucket입니다.

REST API

JSON API

1. OAuth 2.0 Playground에서 승인 액세스 토큰을 가져옵니다. OAuth 사용자 인증 정보를 사용하도록 Playground를 구성합니다.

2. 다음을 포함하는 JSON 파일을 만듭니다.

   {
   "cors": []
   }

3. cURL을 사용하여 PATCH 버킷 요청으로 JSON API를 호출합니다.

   curl --request PATCH \
   'https://storage.googleapis.com/storage/v1/b/[BUCKET_NAME]' \
   --header 'Authorization: Bearer [OAUTH2_TOKEN]' \
   --header 'Content-Type: application/json' \
   --data-binary @[JSON_FILE_NAME].json

   각 항목의 의미는 다음과 같습니다.

   • [BUCKET_NAME]은 버킷의 이름입니다. 예를 들면 my-bucket입니다.
   • [OAUTH2_TOKEN]은 1단계에서 생성한 액세스 토큰입니다.
   • [JSON_FILE_NAME]은 2단계에서 만든 파일의 경로입니다.

XML API

1. OAuth 2.0 Playground에서 승인 액세스 토큰을 가져옵니다. OAuth 사용자 인증 정보를 사용하도록 Playground를 구성합니다.

2. 다음을 포함하는 XML 파일을 만듭니다.

   <CorsConfig></CorsConfig>

3. cURL을 사용하여 Set Bucket CORS 요청으로 XML API를 호출합니다.

   curl -X PUT --data-binary @[XML_FILE_NAME].xml \
   -H "Authorization: Bearer [OAUTH2_TOKEN]" \
   -H "x-goog-project-id: [PROJECT_ID]" \
   "https://storage.googleapis.com/[BUCKET_NAME]?cors"

   각 항목의 의미는 다음과 같습니다.

   • [BUCKET_NAME]은 버킷의 이름입니다. 예를 들면 my-bucket입니다.
   • [OAUTH2_TOKEN]은 1단계에서 생성한 액세스 토큰입니다.
   • [PROJECT_ID]는 버킷과 연결된 프로젝트의 ID입니다. 예를 들면 my-project입니다.
   • [XML_FILE_NAME]은 2단계에서 만든 파일의 경로입니다.

CORS 요청 문제해결

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

1. CORS 구성을 가져오려면 대상 버킷에서 gsutil cors get을 사용합니다. CORS 구성 항목이 여러 개 있는 경우에는 다음 단계를 진행하는 동안 요청 값이 같은 단일 CORS 구성 항목의 값에 매핑되어야 합니다.

2. CORS 요청을 허용하지 않는 storage.cloud.google.com 엔드포인트 요청을 수행하지 않는지 확인합니다. CORS가 지원되는 엔드포인트에 대한 자세한 내용은 Cloud Storage CORS 지원을 참조하세요.

3. 원하는 도구를 사용하여 요청 및 응답을 검토합니다. Chrome 브라우저에서는 표준 개발자 도구를 사용하여 이 정보를 볼 수 있습니다.

   1. 브라우저 툴바에서 Chrome 메뉴 을 클릭합니다.
   2. 추가 도구 > 개발자 도구를 선택합니다.
   3. 네트워크 탭을 클릭합니다.
   4. 애플리케이션이나 명령줄에서 요청을 보냅니다.
   5. 네트워크 활동을 표시하는 창에서 요청을 찾습니다.
   6. 이름 열에서 요청에 해당하는 이름을 클릭합니다.
   7. 응답 헤더를 보려면 헤더 탭을 클릭하고, 응답 내용을 보려면 응답 탭을 클릭합니다.

   응답 및 요청이 보이지 않으면 이전에 실패한 실행 전 요청 시도를 브라우저가 캐시한 것일 수도 있습니다. 브라우저의 캐시를 지우면 실행 전 캐시도 지워집니다. 그렇지 않은 경우 CORS 구성의 MaxAgeSec 값을 더 낮은 값으로 설정하고(값을 지정하지 않으면 기본값은 1,800(30분)), 이전의 MaxAgeSec이 얼마나 길었는지 관계없이 요청을 다시 시도합니다. 그러면 새로운 CORS 구성을 가져오고 캐시 항목을 삭제하는 새로운 실행 전 요청이 수행됩니다. 문제를 디버깅한 후에 MaxAgeSec을 다시 더 높은 값으로 올려서 버킷에 대한 실행 전 트래픽을 줄입니다.

4. 요청에 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:5555 또는 http://localhost.example.com:8080가 아니라 정확히 http://localhost:8080과 일치합니다.

5. 요청의 HTTP 메서드(단순 요청인 경우) 또는 Access-Control-Request-Method에 지정된 메서드(실행 전 요청인 경우)가 버킷의 CORS 구성에서 최소한 하나의 Methods 값과 일치하는지 확인합니다.

6. 실행 전 요청인 경우 하나 이상의 Access-Control-Request-Header 헤더를 포함하는지 확인합니다. 그렇다면 각 Access-Control-Request-Header 값이 버킷의 CORS 구성에 있는 ResponseHeader 값과 일치하는지 확인합니다. 실행 전 요청이 성공하고 응답에 CORS 헤더를 포함하려면 Access-Control-Request-Header에 명명된 모든 헤더가 CORS 구성에 있어야 합니다.

다음 단계

• 교차 출처 리소스 공유(CORS)에 대해 자세히 알아보기