Cors 오류 왜 생기는걸까?

 

 

이전 프론트분과 협업했을 당시 구글 클라우드 버킷에 업로드한 이미지가 종종 떴다가 안떴다가하며 안뜰때는 이런 오류를 뱉는다고 하셨다.

메세지를 자세히 보면 이렇다.

 

Access to image at 'https://storage.googleapis.com/lookids-image-search/closet_data/top04.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

이 당시 클라우드 버킷을 관리하던 건 나였기에 내가 이 문제를 해결해야했다.
이전까진 막연히만 알고있던 CORS 에러를 처음으로 자세히 알아보게 됐다.

 

리소스 보관의 역사

우선 교차 출처 리소스 공유(*Cross-origin resource sharing, CORS) 란건 뭘까? 이걸 풀어 설명하기위해선 웹의 역사를 한번 알아보자. 서로 다른 도메인끼리 요청하는 구조가 사실 웹이 처음 생기면서부터 있던 개념은 아니다.

웹의 초창기 경우 다른 서버에 있는 이미지를 요청하는 것보다 같은 서버에 있는 걸 요청하는 인프라 구조가 일반적이었다. 이때 사용했던 보안 정책은 동일 출처 정책이다. 이 정책은 웹의 기본적인 보안 모델로, 원래는 1995년 Netscape Navigator 2.0에서 처음 도입되었다.

동일 출처 정책은 웹페이지에서 다른 출처의 리소스에 접근하는 걸 제한하는 보안조치이다. Cors에러를 해결한다하면 비단 이미지가 안뜨는 걸 떠올리지만 Js파일 또한 Static파일이니 이걸 예시로 들어보자. 예를 들어 A사이트에서 다른 출처 사이트인 B의 스크립트를 사용할 경우 B사이트는 사용자의 세션을 이용해 사이트 A에 접근하려 시도할 수도 있는거다. 그렇기에 A사이트에서는 A사이트의 출처를 가진 자료들만 사용하도록 한 셈이다.

 

CORS의 등장 배경

그러던 도중 웹이 발전한다. 웹 어플리케이션은 백엔드 서버와 프론트 서버를 나누는 등 복잡성과 상호운용성이 증가했고, 동일 출처 정책만으로는 여러 출처의 리소스를 효율적으로 사용하는 데 제약이 생긴거다. 따라서 웹 페이지가 다른 출처의 리소스에 안전하게 접근할 수 있게하는 방법이 필요했고 이렇게 CORS가 등장한다!

 

즉, CORS는 웹의 초기 보안 모델에 추가된 기능으로, 이전 보다 복잡한 현대 웹의 요구 사항을 충족하기 위해 개발된 정책라고 보면 된다.

 

기본적으로 웹은 동일 출처 정책을 채택중이고, 이에 대한 예외를 적용하고 싶다면 개발자가 CORS를 적용해주면 되는거다.

 

그렇다면 CORS 정책, 어떻게 작성할까? (구글 클라우드 스토리지 기준)

 

1. CORS 설정 파일 만들기: 아래와 같은 JSON 형식의 설정 파일 (cors-config.json이라고 가정)을 만든다.
아래의 설정은 모든 웹 페이지 (*)에서 해당 버킷의 리소스에 GET 요청을 허용하는 설정이다.

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

 

각각의 필드에 대해 설명해보자면

• origin: 어느 출처에서 오는 요청을 허용할지 정하는 것. ["*"]는 모든 출처 허용. 특정 출처만 허용하려면, 해당 출처의 URL을 명시해야한다.
• responseHeader: 브라우저가 접근할 수 있는 헤더 지정. 여기선 ["Content-Type"]만 허용.
• method: 허용할 HTTP 메소드 정함. 여기서는 ["GET"]만 허용.
• maxAgeSeconds: 브라우저가 CORS 사전 요청 결과를 얼마나 캐시할지 설정. 여기선 3600초(1시간).

이 구성은 기본적인 CORS 정책을 정의하는 데 사용되며, 서버 설정이나 특정 클라우드 스토리지 서비스(예: Google Cloud Storage)에서 이런 형식의 JSON을 사용하여 CORS 규칙을 설정할 수 있다.

 

2. gsutil 명령어로 CORS 설정 적용하기

gsutil cors set cors-config.json gs://lookids-image-search

 

3. CORS 설정이 올바르게 적용되었는지 확인하려면

gsutil cors get gs://lookids-image-search

 

이러한 방식으로 CORS를 적용하면 된다.
앞으로는 CORS를 막연하게 생각할 필요 없고 웹에서 제공한 보안 정책이라고 알면 된다.

 

 

---

 

참고

1. https://choo.oopy.io/35bffd94-7a41-4cfa-812c-b8aaf148604a

Springboot에서 GCS로 이미지 파일 업로드 총정리(multipart/form-data)(Google Cloud Storage)(GCP)

2. https://webruden.tistory.com/120

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

3. https://ko.wikipedia.org/wiki/%EA%B5%90%EC%B0%A8_%EC%B6%9C%EC%B2%98_%EB%A6%AC%EC%86%8C%EC%8A%A4_%EA%B3%B5%EC%9C%A0

교차 출처 리소스 공유 - 위키백과, 우리 모두의 백과사전