CORS ?
CORS를 알기전에 동일출처정책을 알고 있어야 한다.
동일 출처 정책(Same-Origin Policy) : 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한하는 중요한 보안 방식이다
즉. 이 정책은 웹 브라우저 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 데이터를 요청하여 주고 받을 수 있게끔 하는 정책이다.
CORS란 (cross-origin-resource-sharing) ??
포트나 도메인 혹은 프로토콜이 다른 사이트에 특정 데이터등을 요청하는 것을 말한다. 이때의 요청은 추가 HTTP 헤더인 cross-origin HTTP 에 의해 요청이 이루어지게 되며 위의 동일 출처 정책을 해결하기 위함이다
예 1 ) 네이버에서 검색해서 나오는 결과들을 내가 직접만든 웹사이트에서 보여주고 싶을때를 말합니다.
예 2 ) localhost:3000 에서 localhost:4000으로 데이터를 요청할 때도 마찬가지 입니다.
이렇게 동일 출처 정책 때문에 다른 사이트간의 데이터를 주고받음이 cors를 설정 안했기 때문에 cors 에러가 나는 것이며 이 부분을 해결할 수 있는 방법은 크게 아래와 같다.
cors err 해결방법 ?
서버단에서 해결하기
Access-Control-Allow-Origin response header
서버측의 응답에서 접근권한을 주는 헤더를 추가하는 것이다.
Node.js Express 미들웨어 CORS
문서가 친절하게 되어 있으며 npm install을 통해 미들웨어를 설치하고 App.js 에 미들웨어 세팅을 해주면
모든 cross-origin 요청에 대해 응답도 가능하며 특정 도메인이나 특정 요청에만 접근 허용 또한 가능하다.
클라이언트단에서 해결하기
proxy 설정
만약 직접 구현한 서버가 없어 클라이언트 단에서만 해결해야한다면 이 방법을 사용하자.
여러 이유로 직접 통신이 안되는 사이를 서로 통신할 수 있도록 도와주는 역할을 말한다 ! 중개자 라고 보면 된다.
프록시로는 package.json을 통해 설정도 가능하고
따로 setupProxy.js라는 파일을 만들어 프록시 미들웨어를 설치후 작성해서 사용 가능하다.
위의 해결 방법에서 나의 경우 컨트리뷰터로 참여한 Exporterhub 라는 프로젝트에서
깃허브와 로그인 연동시 cors err를 마주하게 되었고 아래와 같은 프록시를 사용하여 해결했다.
먼저 위와 같이 package.json에 npm install을 통하여 프록시 미들웨어를 설치 한다.
그 뒤에 아래와 같이 setupProxy.js를 만든다.
이렇게 cors err가 발생 했을 때에 에러가 왜 나는지도 모르겠고 그렇다보니 이해가 안되어
해결하는 방법을 찾으려고 해도 쉽게 적용을 시키지 못했었다.
현업에서는 주로 백엔드 개발자에게 cors 처리 해주세요 라고 하면 해결이 가능하지만 . .
똑같이 백엔드 개발자 팀원에게 전달을 하였지만 cors 처리가 되었다고 답변이 돌아오게 되어
일단 프론트도 프록시 처리를 해보자(?) 해서 처리했지만 이해가 되지 않아 cors에 대해
다시 한번 정리해보기 위함으로 글을 작성한다.
