[지식]CORS원인 및 에러 해결

CORS(Cross Origin Resource Sharing)

교차 출처자원 리소스 공유 , 즉 출처가 다른 자원들을 공유한다는 뜻으로 한 출처에있는 자원에서 다른 출처에있는 자원에 접근하도록 하는 개념이다.

 

cors정책은 응답받는 리소스들을 검사하는 기능을 한다.

 

출처란?

https://rodolldev.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F

프로토콜 / 호스트 / 포트(생략됨) /패스 / 쿼리스트링

 

이렇게 이루어져있을 때에 프로토콜 , 호스트 ,포트가 같다면 동일 출처 ( Origin )라고 한다.

 

만약 다를때에는 출처 요청을 CORS정책에 준수하여 요청해야만 정상적으로 응답을 받을 수 있다.

 

왜 이런 정책이 생겨났는지?

 

만약 <script> 가 심어진 다른 페이지를 열었다가 <script> 가 실행되어 컴퓨터에 Delete/DriveC 를 요청하도록 되어있다면 컴퓨터가 먹통이 되어버리고 말것이다. 따라서 다른 출처의 접근을 막기 위해서 동일 출처 정책이 등장 했습니다.

 

CORS 기본 동작 과정

1. 클라이언트에서 HTTP 요청의 헤더에 Origin을 담아 전달.
2. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 전달.
3. 클라이언트에서, 자신이 보냈던 요청의 Origin과 서버가 보낸 Access-Control-Allow-Origin을 비교.

• 유효하지 않다면(비교 했을 때 다르다면) 그 응답을 사용하지 않는다. 즉, CORS정책으로 Origin을 비교하는 것은 브라우저에서 처리하기 때문에 서버에서 정상적으로 응답을 하였어도 브라우저가 응답을 CORS 위반이라고 분석하면 그 응답을 사용할 수가 없다.

CORS 에러 해결 방법

왜 이러한 문제가 생겨나는지 확인했다면 이제 해결방법을 알아보자

 

1.chrome 확장 프로그램 이용

cors 문제를 해결해주는 크롬 확장프로그램을 이용한다.

https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

Allow CORS: Access-Control-Allow-Origin

확장 프로그램을 설치하면 오른쪽 상단에서 활성화 시킬 수 있다. 활성화 시키게 되면 로컬환경에서 API를 테스트 시 , CORS문제를 해결할 . 수 있다. (테스트 환경에서 해결 용이)

 

2. proxy 서버 이용하기

프록시란 클라이언트와 서버 사이에서 대리로 서버를 열어주는 역할을 한다. 

프론트에서 직접서버에 요청을 했을때에 CORS에러가 뜬다면 , 모든 출처를 허용한 프록시서버를 이용하면 해결된다.

 

다만 api 요청 횟수 제한이 있어 실전에서 사용하기엔 무리이며 , 실전에서는 직접 프록시 서버를 구축하여 사용하여야 한다.

 

3.서버에서 Access-Control-Allow-Origin 헤더 세팅하기

직접 서버에서 HTTP헤더 설정을 통해 출처를 허용하게 설정하는 정석적인 해결책이다.

여러 서버가 있는 관계로 각 서버의 문법에 맞게 적합한 HTTP헤더를 추가해주면 된다. 서버는 구글링 몇초면 금방 찾는다. 

 

부디 당신의 에러가 해결되길 빈다.