초보자도 간단하게 이해하는 CORS 개념과 아주쉬운 해결방법

 

개발을 하다가 많이들 부디치는 문제인 CORS 문제!!!

선배들한테 CORS에 대해서 주워 듣기는 했는데, 막상 CORS문제를 만나니 머리가 아프다 ㅠ

어렵지만 웹 개발자로써 꼭 알고 가야할 에러이기에 이번 기회에 한번 정리해보기로 하자!

 

먼저 에러메세지를 보자

Acess to XMLHttpRequest at 'http://파일IP:85/file/20160007/'
from origin 'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

1.상황

인사모듈을 개발중인데 개발하고 있는 local 컴퓨터 -> 웹에서 다른서버에 있는 폴더에 접속 -> 웹에서 보이는 폴더안에서 파일 링크를 가져와야 함!

 

중요 포인트는 내가 개발하는 컴터 주소 ('http://localhost:8080') 와
접속하고자 서버의주소  ('http://파일IP:85/file/20160007/') 다르다 라는 것!

 

이부분이 문제가 된다는 사실! 즉 다른 서버에 접근해서 데이터를 받아오는 행위 자체가 CORS에러를 유발한다는 사실이라는거 그렇다면 왜??? 유발을 하는지 먼저 CORS에 대해서 알아 보자!

 

2.CORS(Cross-Origin Resource Sharing) 란??

뜻을 직역하면 "교차 출처 리소스 공유 정책" 이라고 하는데,,, 뭔소리냐?? 할거다

쉽게 말하면 "다른 출처에서 데이터를 공유할수 있는 방법" 이라고 생각하시면 좀더 쉬울거 같다

 

CORS가 나오게 된 배경을 먼저 설명하자면 만약 자유롭게 컴터끼리 소통이 가능해 지게 된다면 그 중간에 해커가 심어놓은 자바스크립트 코드로 사용자의 개인정보를 가로채거나 내컴터를 나도 모르게 악의적인 용도로 쓸수 있는 여러 경우가 있기 때문에 SOP (Same-Origin Policy) 정책을 만들어 ''동일한 출처에서만 리소스를 공유할 수 있다!"

즉, 데이터나 자료는 내컴터에 있는걸 가져다 써도 다른컴터에 있는 데이터나 자료는 가져다 쓸수 없어!!! 라는 정책을 만들어 해커의 침입을 대비 하였다.

 

그런데,,,우리처럼 착한 개발자들은 다른서버에 있는 정보를 가져와 사용자에게 보여줘야 하는데 SOP 정책에 막혀 다른서버의 리소스를 못가져 온다는것 ㅠㅠㅠㅠㅠ

그래서!!!

그런 착한 개발자를 위하여 CORS(Cross-Origin Resource Sharing)라는 정책을 만들어

CORS정책에 따라 설정을 한다면 다른컴터에 있는 데이터나 자료 가져다 쓸 수 있도록 허용 해 줄께! 라는 의미 

즉, CORS정책에 맞게 수정만 하면 CORS에러에서 탈출 할 수 있다는 사실 !!!

근데 그전에 CORS에 대한 간단한 동작원리를 살펴 볼까 한다.

3.CORS 동작원리

동작원리를 알기위해서 선행 지식으로 알아야할 부분이 Origin 을 알아야 함.

웹에서 자료가 어디에서 부터 오는지 위치를 알려주는걸 URL 이라고 하는데,
URL중에서 Protocol(Scheme) + Host + Port   이 세가지를 합쳐서  출처(Origin) 으로 본다

예) http://www.naver.com:80/????  있다면 

http:// =>Protocol(Scheme) 

www.naver.com => Host 

:80 => Port  

 

출처(Origin)에 대해 알았다면 이걸가지고 어떻게 구별 하나?

 

출처의 구별은 브라우져가 하는데 위에서 배운 Protocol(Scheme) + Host + Port  구성된 출처(Origin)가 동일하다면 동일한 출처로 본다. 그러나 출처(Origin)의 구성요소중 하나라도 다르다면 다른출처로 보고 error를 뱉어내는것

 

그래서 CORS 동작원리가 어떻게 되냐구!!

(1)클라이언트 HTTP 프로토콜의 요청 HEAD 부분에 출처(Origin) 담아 서버에게 전달한다.

(2)서버는 HTTP 프로토콜의 응답 HEAD 부분에 Access-Control-Allow-Origin 에 해당서버에 접근이 허용된 출처(Origin) 를 담아 보내고

(3)마지막으로 웹브라우져에서 요청할때 보낸Origin과 응답으로 받은 Access-Control-Allow-Origin 를 비교한다.

 

4.CORS error 해결방법

그래서 방법은??? 이라고 물어 보실거 같은데,...

근본적으로는 서버에 Access-Control-Allow-Origin 헤더를 세팅을 해야되나...아직 거기까지는 좀더 공부가 필요하므로 

임시방편으로 크롬 확장자 기능을 사용 했다.

 

(1)아래링크 타고 들어가기

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=ko 

Allow CORS: Access-Control-Allow-Origin

(2)이미지의 순서대로 누르고 다운받기

(3)다운받고나서 상단에 퍼즐모양 클릭 -> 하단에 다운받은 CORS 클릭

(4)마지막에 표시한 로그부분 클릭하면 CORS가 켜지면서 임시적으로 요청한 출처가 허용된다.

다만, 말했듯이 임시해결방안이므로 test 용도로만 사용하고 서비스상용시에는 CORS정책에 맞춰 서버에 Access-Control-Allow-Origin 헤더를 세팅 하기를 바란다,

오늘 하루도 즐코 하길...