CORS 에러
fetch 혹은 axios 등과 같은 함수로 자료(html, jpeg, svg, mp4 등과 같은 파일)를 요청할 때 콘솔 창에 아래와 같은 에러가 뜨곤 한다.
이런 에러는 왜 뜨는지와 어떻게 해결해야하는지에 대해 작성해보고자 한다.
CORS란?
CORS란, Cross Origin Resource Sharing의 약자이다. 말 그대로 '교차하는 출처(Origin)에 대한 자원 공유'라는 의미이다.
Protocol, Host, Port가 같아야 Same Origin 이라고 인식한다.
가장 간단한 예시로, 프론트가
localhost:3000의 3000번 포트를 쓰고 백엔드가localhost:8000의 8000번 포트를 사용한다면 다른 출처라고 생각한다.
SOP 정책 (Same Origin Policy - 동일 출처 정책)
만약 CORS를 자유자재로 허용하게 되었다고 한다면 어떻게 될까? 보안의 문제가 생길 수 있다.
회사의 Client(
http://localhost:3000) 가 회원 정보를 Server(http://localhost:3000)에 GET 요청을 하게 되면 회사의 Client는 회원 정보를 확인할 수 있게 된다. 만약 회원 정보를 탈취하려는 해커(http://localhost:8800)가 GET을 요청해도 Server는 회원 정보를 전달할 수 있게 된다.
따라서, 이러한 문제를 막기 위해 동일한 출처(Same Origin) 인지 확인하고 해당하는 요청에만 응답할 수 있게끔하는 것이다.
CORS 에러 해결법
그러나 동일 출처에서만 요청하는 일은 쉽지 않다. 따라서 CORS 에러를 어떻게 해결할 수 있는지에 대해 알아볼 것이다.
JSONP 방식
JSONP 방식은 최근에 사용하지 않지만 면접에서 질문을 2번이나 받았기 때문에 작성한다. 레거시 코드로 아직 남아있는 파트가 있나..?(;;)
<script src="https://test.com"></script>HTML 파일에 Script 파일에 위와 같이 설정해주게 되면 CORS 에러에서 자유로울 수 있습니다.
위와 같은 방식의 2가지 조건
- 서버가 JSON 방식으로 내려주어야 한다.
- 받은 데이터를 브라우저단에 저장해야한다.
브라우저단에 데이터를 저장할 수 있다는 문장에서 보안에 관련된 이슈가 생길 것 같죠🥹 그래서 이제는 사용하지 않는 방식입니다.
Proxy와 CORS (Express)
package.json 파일에 아래와 같이 적어준다.
"proxy": "요청 허용할 주소"위와 같은 방법을 사용해도 해결이 되지 않는 경우가 있다. Express 서버를 사용하는 경우에는 CORS를 설치하고 오픈해주어야한다.
npm i cors교차 출처 리소스 공유 (CORS)
우아한 Tech - [10분 테크톡] 나봄의 COR
CORS와 JsonP에 대해서
