🔦CORS가 뭔데? : 한 문으로만 들어가

이 그림은 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 개념을 단순화하여 설명합니다. 서로 다른 도메인을 별도의 섬으로 표현하였으며, 한 섬에는 웹 서버가, 다른 섬에는 브라우저를 사용하는 사용자가 있습니다. 이 두 섬 사이에는 CORS를 상징하는 다리가 그려져 있으며, 이를 통해 사용자가 다른 섬의 웹 서버에서 리소스에 접근할 수 있음을 나타냅니다. '접근 불가' 표지판이 '접근 허용'으로 바뀌는 모습을 통해 CORS가 교차 출처 리소스 공유를 가능하게 하는 역할을 강조하고 있습니다.

---

CORS(Cross-Origin Resource Sharing)는 웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 하는 보안 메커니즘입니다. 웹에서는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)이 적용되는데, 이 정책은 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용을 제한합니다. 여기서 '출처'란 도메인, 프로토콜(예: HTTP, HTTPS), 그리고 포트를 포함합니다.

예를 들어, 동일 출처 정책에 따라 http://example.com에서 로드된 웹 페이지는 http://another-domain.com에서 호스팅되는 이미지, 폰트, CSS, 또는 스크립트를 자유롭게 사용할 수 없습니다. 이러한 제한은 보안 문제를 예방하기 위해 필요하지만, 현대 웹 애플리케이션에서는 다양한 출처에서 리소스를 불러와야 할 필요가 종종 있습니다.

CORS는 이러한 상황에서 안전하게 출처 간 리소스 공유를 가능하게 합니다. 서버가 특정 출처에서 오는 요청을 허용하도록 설정할 수 있으며, 이 설정은 HTTP 헤더를 통해 이루어집니다. 예를 들어, 서버가 특정 웹 페이지에서 자신의 리소스에 접근하는 것을 허용하고자 할 때, 서버의 응답에 'Access-Control-Allow-Origin' 헤더를 포함시키면 됩니다.

CORS는 현대 웹 애플리케이션의 상호 운용성과 유연성을 크게 향상시키면서도 보안을 유지하는 중요한 기술입니다.

---

이 그림은 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)의 개념을 더 쉽게 설명합니다. 한쪽에는 다른 도메인 서버(잠긴 보물 상자로 표현됨)에서 리소스(예: 이미지 또는 데이터)에 접근하려는 웹 페이지가 있습니다. 'CORS'라고 표시된 열쇠가 보물 상자를 여는 장면을 통해 CORS가 교차 출처 리소스에 대한 접근을 가능하게 하는 방식을 상징합니다. 웹 페이지와 서버는 만화 캐릭터처럼 표현되어 있으며, 열쇠와 상자의 상호작용이 중심에 있어 개념을 명확하고 간단하게 전달합니다.

CORS를 사용하는 이유는 여러 가지가 있습니다:

1. 보안 강화: CORS는 웹 애플리케이션의 보안을 강화합니다. 서버는 특정 출처에서 오는 요청만을 허용하도록 설정할 수 있어, 불필요하거나 의도치 않은 출처로부터의 접근을 차단할 수 있습니다.
2. 자원 공유의 유연성: CORS는 다양한 출처에서 호스팅되는 리소스(예: 폰트, 이미지, 스타일시트)를 웹 페이지에서 사용할 수 있게 하여 개발자에게 유연성을 제공합니다.
3. API 사용성 향상: 많은 웹 서비스와 API가 다른 도메인의 애플리케이션에서 자신들의 데이터에 접근할 수 있도록 허용합니다. CORS를 통해 이러한 API들은 안전하게 외부에서 접근할 수 있게 됩니다.
4. 성능 최적화: 웹 애플리케이션은 필요한 리소스를 여러 출처에서 로드할 수 있어, 로딩 시간과 성능을 최적화할 수 있습니다.

CORS는 현대 웹 개발에서 필수적인 요소로, 다양한 출처의 리소스를 안전하고 효율적으로 활용할 수 있게 해줍니다.

---

한 아이가 높은 선반 위에 있는 쿠키 항아리를 가져오고 싶어합니다. 하지만 항아리에는 '가족만 사용 가능'이라는 표지판이 붙어 있어서, 아이 혼자서는 쿠키를 꺼낼 수 없어요. 그런데 엄마나 아빠(여기서 'CORS'로 표시됨)가 와서 아이에게 쿠키를 꺼낼 수 있는 허락을 주고 도와줍니다. 이렇게 아이는 쿠키를 얻게 되죠.

이것처럼, 웹에서 CORS는 한 웹사이트가 다른 웹사이트의 쿠키(또는 다른 종류의 데이터)를 사용할 수 있도록 허락해주는 것과 같습니다. 보통 웹사이트는 다른 웹사이트의 데이터를 사용할 수 없지만, CORS가 있으면 '엄마나 아빠'처럼 허락을 주어 다른 곳의 데이터를 안전하게 사용할 수 있게 해줍니다. 이렇게 해서 웹사이트들은 더 재미있고 유용한 정보를 제공할 수 있어요!

 

---

 

🧐 그럼 cors error는 뭘까 ?

CORS 에러는 웹사이트가 다른 웹사이트의 데이터에 접근하려고 할 때, 그 데이터를 가지고 있는 웹사이트에서 허락하지 않았을 때 발생합니다. 이를 다시 쉽게 설명하자면, 이전에 쿠키 항아리 예시를 생각해보면 좋을 것 같아요.

상상해보세요, 아이가 다른 집의 쿠키 항아리에 손을 뻗으려고 합니다. 하지만 그 집의 엄마나 아빠(다른 웹사이트의 서버)가 "우리 집 쿠키는 우리 가족만 먹을 수 있어!"라고 말하며 허락하지 않아요. 그래서 아이는 쿠키를 얻을 수 없습니다. 이 상황이 바로 CORS 에러와 같습니다.

웹에서는, 한 웹사이트가 다른 웹사이트의 이미지, 글, 데이터 등에 접근하려 할 때, 그 데이터를 가진 웹사이트가 특정 HTTP 헤더(Access-Control-Allow-Origin)를 사용하여 허락해주어야 합니다. 만약 이 허락이 없다면, 웹 브라우저는 보안을 위해 데이터에 접근하는 것을 차단하고 CORS 에러를 발생시킵니다. 이러한 에러는 웹 개발자들이 종종 마주치는 문제 중 하나이며, 데이터 공유를 허락하는 적절한 설정을 통해 해결할 수 있습니다.

---

🧐 그럼 프록시는 어떻게 CORS ERROR를 막을까?

 

프록시는 경비원이다. 에에올씨는 723호를 통해서 들어갈 수 있는 집에 산다. 택배기사는 에에올씨가 722호에 사는 줄 알았다. 

택배기사가(데이터가 필요한 웹) 이거 에에올씨(데이터 주체 웹) 한테 전달해야하는데 722호(PORT)로 전달하면 될까요?

라고 묻는다. 

프록시 경비원이 없다면, 택배기사는 잘못된 벨을 눌러서 택배를 전달하지 못할 것이다. (CORS ERROR 발생 😭)

프록시 경비원이 있다면, 에에올씨는 723호에 사는데~  택배기사한테 알려줘서 결국 택배는 잘 전달 될 수 있다.  (CORS ERROR 해소 )