CORS란? Cross-Origin Resourcs Sharing의 약자
한글로 '교차 출처 자원 공유' 라는 뜻으로
어떠한 출처가 있는 웹에서 출처가 다른 웹의 자원에 접근할 수 있도록 권한을 부여하는 방법이다.
웹은 resource의 출처가 자신의 출처와 다를때 교차 출처 HTTP헤더를 요청한다.
출처란 '프로토콜 + host + port(생략가능)'를 뜻한다.
(프로토콜)https://
(호스트)www.naver.com
/123(포트 생략가능)
CORS의 필요성
다른 출처로부터의 접근을 막기 위함.
만약 다른 출처로부터의 접근이 자유롭다면 CSRF(Cross-site request forgery)에 의한 공격을 당할 수있다.
해커가 개인정보를 조회할수 있는 내용의 자신의 script파일이 담긴 웹사이트를 피해자에게 전송해서 피해자가 해당 웹사이트를 열게 되면 script파일이 실행되어 피해자의 개인정보를 해커가 빼 갈 수 있다. 이를 방지하고자 다른 출처로부터의 접근을 막는다.
SOP(Same-Origin Policy)
동일 출처 정책
앞서 언급한 CSRF를 방지하기 위해서 브라우저는 클라이언트의 요청 출처와 서버의 출처가 일치해야하는 동일 출처 정책을 기본적으로 따른다.
CORS 동작원리
출처가 다른 웹에 HTTP프로토콜로 요청을 할때 브라우저는 요청 출처를 보내게 되는데 요청을 응답하는 응답헤더에서 요청 출처가 접근권한이 있는 출처인지 확인하고 접근 권한이 있는 출처이면 접근하도록 허용하고 그렇지 않으면 오류를 발생시킨다.
CORS오류
웹 개발을 하다보면 CORS오류가 발생할 때가 있다.
나는 네이버의 뉴스 검색 api를 요청하는 과정에서 발생했는데
CORS오류는 요청하는 클라이언트의 출처와 서버의 출처가 달라서 발생하는 것이므로 package.json파일에 porxy옵션을 추가하고
"proxy":"https://openapi.naver.com"api요청 url에 프록시에 입력한 부분을 제외한 url를 입력하여
const newsApiUrl = `/v1/search/news.json?query=${encodeURI('이슈')}$display=10`;cors오류를 피할 수 있게 되었다.
