구글 클라우드 스토리지 CORS 세팅방법 (set up CORS for Google Cloud Storage Bucket)

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

google cloud shell에서 touch cors-setting.json 을 생성해줍니다.

 

[
    {
        "origin": [
            "*"
        ],
        "responseHeader": [
            "Content-Type"
        ],
        "method": [
            "GET",
            "HEAD",
            "DELETE"
        ],
        "maxAgeSeconds": 3600
    }
]

cors-json-file.json의 내용을 위와 같이 작성해줍니다. 핵심은 origin입니다. 원하는 도메인을 지정하거나 전체 access를 허용한다면 *을 origin에 추가하면 됩니다.

 

CORS 설정파일을 추가했다면, 이제 cors를 제어할 버킷에게 해당 설정을 반영해주면 됩니다.

gsutil cors get gs://example-bucket

해당 버킷 gsutil 링크는 버킷 세부정보를 참고하시면 됩니다.

 

CORS 요청 문제해결

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

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

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

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

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

3. 요청에 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가 아니라 정확히 과 일치합니다.

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

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

참고: https://cloud.google.com/storage/docs/configuring-cors?hl=ko