Vue [Vue.js] - CORS 란? - 제 1편

[김건우]

안녕하세요.

오랜만에 새로운 시리즈를 발표해보려 글을 끄적이게 되었습니다.

이번 시간에는 CORS 에 대해 알아볼 시간입니다.

CORS 의 발음이 코스라고 영어 Course 라고 알아보시면 큰일납니다!!!

여러분 모두 주의하시고 끝까지 읽어주셨으면 좋겠습니다.

CORS 란?

출처 : https://neelbhatt.com/2015/09/10/what-is-cors-and-how-to-enable-it-in-asp-net-5vnext/

자, 이제 CORS 에 대해 알아보도록 하겠습니다.

출처 : https://news.nate.com/view/20211003n13528

참고로 지금부터 설명드리는 CORS 는 필촉 크로스가 아닙니다.

실제로 웹 개발 중, 브라우저, 그리고 프론트엔드 개발 시 사용합니다.

CORS 에 대한 정확한 의미를 알아보기 위해 한 번 MDN Web Docs 에 들어가 검색해보았습니다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 CORS 란 교차 출처 리소스 공유 (Cross-Origin Resource Sharing) 의 약자이며, 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념을 말합니다.

대체 이게 무슨 말일까요??

지나가는 개발자 A씨 : 아니 CORS 가 무엇인지 모르겠어!!! 악 내 눈!!!!!

우선 CORS 라는 개념을 알기 전에 먼저 출처라는 뜻과 그리고 교차 출처라는 말에 대해 알아야 합니다.

출처와 교차 출처?

교차 출처에 대해 알기 전, 먼저 출처에 대한 단어 뜻풀이를 알아야 합니다.

출처 : https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

여기 Protocol 과 Host, 그리고 Port 를 함께 묶어 구성되는 Origin 과 그 뒤에 Path, Query String, 그리고 Fragment 까지 함께 붙는 URL 이 있습니다.

URL 이란 Uniform Resource Locator 의 약자로, 사용자가 원하는 정보의 위치와 종류를 파악할 수 있도록 Web Page 의 정보 구조를 반영한 것을 말합니다. 그러므로, Web Page 의 정보 구조가 제대로 반영된 URL 은 좋은 UX (사용자 경험) 이며, 이는 SEO (검색엔진 최적화) 기획에서 중요한 지표라고 말할 수 있습니다.

또한 출처라는 개념을 알기 위해선 먼저 URL 구조에 대해서 알아볼 필요가 있습니다.

URL 의 구조는 Protocol, Domain, Sub Directory 로 구성되어 있습니다.

출처 : https://www.ascentkorea.com/what-is-url/

참고로 여기서 각각의 구간들은 상단에 Origin 과 Path, Query String, 그리고 Fragment 구조로 이루어져 있는 URL 과 같은 개념입니다.

Protocol

여기서 의미하는 Protocol 이란 Web Site 에서 Server 와 Client 간 어떤 방법으로 자원을 접근할지 알려주는 통신 규악 중 하나입니다. URL 의 가장 앞 부분에 있으며, http 와 https 가 여기에 해당됩니다.

참고로 여기서 쓰이는 http 와 https 의 차이는 기존 http 는 권한이 없는 당사자가 인터넷을 통해 어떠한 자료들도 모두 엑세스하여 열람할 수 있는 것을 말하며, https 는 모든 데이터를 암호화된 형태로 전송하는 것을 의미합니다.

그리고 많은 Web Site 들이 기본 Protocol 로써 https 를 사용하고 있습니다.

Domain

Domain 이란 URL 에서 Web Server 의 위치를 지정하는 부분을 말합니다. 주로 www.naver.com  과 같은 Domain 이름으로 사용되며, 127.0.0.1 과 같은 IP 주소로도 사용할 수 있습니다.

www 부분을 Sub Domain (Host Name) 이라 부르며, 특정 Web Site 에 접근하는데 사용됩니다.

그리고 example.com 이 Domain 이름으로 Network 상에서 Computer 를 식별하는 Host 명입니다.

마지막으로 들어오는 :443 과 같이 숫자가 : (Colon) 뒤로 오는 구조를 Port Number 라고 부르며, Web Server 에서 자원을 접근하기 위해 사용하는 Gate 번호이며, 표준 http 에서는 80, https 에서는 443 을 사용합니다. 이는 공통적으로 쓰이는 규약이므로, 굳이 작성하지 않아도 브라우저가 알아서 처리하여 보여줍니다.

Sub Directory

Sub Directory 는 해당 Page 가 위치한 File Systerm 의 경로이며, Web Page 또는 File 을 구성하는데 사용되는 Directory 를 나타냅니다. Sub Directory 를 통해 Page 가 현재 어느 Page 의 하위로 들어가 있는지 확인이 가능합니다.

출처 (Origin)

결국 돌고 돌아 출처의 정의는 Protocol (Scheme), Host, Port 를 합친 것이며 (또는 Protocol, Sub Domain, Domain 및 Domain 확장자를 합친 구조), Server 의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 합쳐놓은 것을 의미합니다.

이제 출처와 URL, 그리고 Origin 에 관한 간략한 개념을 알아봤으니, 동일 출처 정책과 교차 출처에 대한 의미, 그리고 CORS 에 대해서 알아보겠습니다.

우선 동일 출처 정책입니다.

동일 출처 정책에 대한 아주 좋은 예시를 어떤 Blog 에서 찾게 되어 이 Blog 글을 통해 동일 출처 정책의 예제에 대해 알아보고자 합니다.

출처 : https://velog.io/@hahan/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80browser%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

다음 Chrome Logo Image 와 Safari Logo Image 를 보시겠습니다.

그리고 여기에 쓰이는 Image 의 주소를 확인해보겠습니다.

자세히 확인해보면 겹치는 부분이 있습니다.

네, 바로 https://velog.velcdn.com 부분입니다.

물론 그 이후로 `/images` 라는 Path 가 붙고, 그 이후로 Query String 과 Fragment 에 관한 정보가 나오지만, 여기서 알 수 있는 사실은  두 Image 가 같은 Web Site 이며, 같은 Web Site 내에서 서로 공유되고 있는 Image 들이므로, 한 Web Site 내의 Resource 들을 참고할 수 있습니다.

출처 : ChatGPT

그렇지만 이 Web Site 가 아닌 다른 Web Site 에서 Resource 를 가지고 온다면 상호작용 불가능해집니다.

예를 들어, Youtube 에서 가지고 온 영상을 제가 지금 글을 올리고 있는 https://cafe.daum.net/vincentarnold 에 올린다면, Protocol + Host + Port 구조를 이루고 있는 Origin 주소가 다르므로, 사용자가 해당 Youtube 영상을 클릭하기 전, Youtube 영상이 먼저 실행되지 않도록 Browser 에서 사전에 방지합니다.

이와 같이 같은 출처, 즉, 같은 Web Site 에서만 Resource 를 공유하게 하는 정책을 SOP 라고 부르며, Same-Origin Policy 라고도 부릅니다. 그리고 SOP 에 관한 자세한 설명은 하단 표 그림과 같이 구성되어 있습니다.

출처 : https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

그러나 Web 에서도 다른 출처에 있는 Resource 를 가져와 사용하는 일이 우리 주변에서도 자주 일어나는 일입니다.

예를 들자면 Youtube 영상을 Kakao Talk 채팅방에 그 Link (URL) 를 공유하는 일, 또는 다른 Blog 나 Web Site 를 내 Blog 나 Cafe 에 그 Link (URL) 을 공유하는 일 등 수 많은 경우들이 이에 포함됩니다.

그래서 위와 같이 몇 가지 예외 조항을 두고 허용하고 있으며, 그 중 하나가 'CORS 정책을 지킨 Resource 요청' 이라고 부릅니다.

CORS (Cross Origin Resource Sharing)

CORS 를 한국어로 번역한다면 교차 출처 Resource 공유가 됩니다.

위에서 제시한 몇 가지 예시들처럼 다른 출처의 Resource 공유를 한 사례를 바탕으로, 이와 같은 공유에 대한 허용 또는 비허용 정책을 의미합니다.

CORS Issue 는 이 정책을 위반했기 때문에 발생하는 것이며, 특히 개발자들이 아주 귀찮아하고 싫어하지만, 사실 CORS 는 우리가 여기저기서 가져오는 Resource 가 안전하다는 최소한의 보장을 해주는 방어막 역할을 돈독히 해줍니다.

Access to fetch at ‘https://api.domain.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled

API 주소에서 Local 주소로 가져오기 위한 Access 가 CORS 정책에 의해 차단되었다는 내용입니다.

그 이유는 API Server 단에서 내 Domain 에서의 접근을 허용해주는 Access-Control-Allow-Origin Header 설정을 해두지 않았기 때문입니다.

CORS 동작 방식 및 Access-Control-Allow-Origin Header 에 관한 내용은 2편에 이어 작성해 나가도록 하겠습니다.

감사합니다~!!

1편 출처

https://coding-maggot.tistory.com/100

[웹 개발] 프론트와 백에서의 CORS 문제 해결하기

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

https://escapefromcoding.tistory.com/724

CORS란 무엇인가?

https://velog.io/@hahan/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80browser%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

브라우저(browser)란 무엇일까?

https://www.ascentkorea.com/what-is-url/

URL이란 무엇인가? - 어센트 코리아