CORS & crossorigin

개발 공부를 하면 할수록 공부할게 많아지는 것 같아요.

그냥 사용하는 것이 아니라 그게 무엇인지 알아보려고 검색하면, 그 안에 새로운 게 나타나고 또 나타나고 꼬리를 물면서 엄청나게 많아지는 것 같아요.

초보자인 제가 어디까지 깊게 들어가고, 글을 작성하면서 어디까지 설명해야 할까 라는 고민이 생기더라고요.

이번 글을 React의 기본 개념을 공부하기 위해 라이브러리를 추가하게 되면서 crossorigin라는 것을 보게 되고 나서 이게 무엇일까?라는 궁금증으로 찾아보다가 작성하게 되었어요.

기본 개념 정도만 설명하고 다음에 좀 더 깊게 들어가 볼까라는 생각으로 글을 쓰는 점 참고해주세요.

 

1. CORS (Cross Origin Resource Sharing)?

CORS는 간단하게 말하면 도메인 또는 포트가 다른 외부의 서버 자원에 접근하는 메커니즘입니다.

더 간단하게 말하면, 내 도메인 안에 있는 것이 아닌 외부의 도메인에서 가져다가 쓰겠다는 것입니다.

HTTP 요청은 기본적으로 Cross-Site HTTP Requests가 가능하여 img나 css 등을 외부의 것을 사용할 수 있습니다. 하지만, <script> 태그는 Same Origin Policy를 적용받기 때문에 Cross-Site HTTP Requests가 불가능하여,

from origin 'http://~~' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

와 같은 경고 메시지가 발생합니다.

또한, Ajax의 사용이 많아지면서 스크립트에서 생성되는 XMLHttpRequest에 대해서도 Cross-Site HTTP Requests가 가능해야 한다는 요구가 늘어나면서 W3C에서 CORS라는 이름의 권고안이 나왔습니다.

2. CORS 사용 방법

Cross-Site HTTP Requests를 사용하기 위해서는 사용 언어, 위치 등에 따라서 여러 방식이 존재합니다.

1. <script>태그 안에 crossorigin 넣기

2. 스프링 프레임워크에서 어노테이션으로 @CrossOrigin(origins = {"주소"}) 추가하기

3. node.js 미들웨어에 CORS 추가하기 - 모든 요청에 대한 허가를 하게 되므로 설정필요

4. header에 "Access-Control-Allow-Origin" 설정하기 - 전체 호스트에 대한 요청 허용이므로 csrf 공격에 추약

5. 리액트 개발 환경 시 webpack-dev-server proxy 기능 활용

 

3. 추가 공부

우선 위에서 말씀드렸듯이 간단하게 CORS가 무엇인지, 발생하는 문제에 대한 간단한 해결방법을 말씀드렸어요.

저는 추후에 좀 더 공부하려고 합니다.

아래 사이트에서 공부하시면 좋을 것 같아요.

나중에 공부를 한 후에 추가적으로 업데이트하겠습니다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS