주경야독 - CORS 정책 위반 이슈

우선 이 정책을 이해하려면 SOP에 대해 알아야 한다.

✅ SOP : Same-Origin Policy(동일 출처 정책) 

웹 브라우저에서 서로 다른 출처의 접근을 허용하지 않는 정책이다.

다르게 말하면 동일한 출처끼리의 접근만 허용하는 정책이다. (난 이말이 더 이해하기 편했다.)
출처란 프로토콜(http, https), 도메인, 포트번호 이 3가지의 조합을 의미한다.
http:www.naver.com:8080 <= 이게 바로 "출처"
따라서 이 출처가 같아야만 리소스를 공유한다.

 

http:www.naver.com:8080 과 http:www.naver.com:1010은 출처가 달라 리소스를 공유할 수 없다.

⭐ 출처가 다르면 리소스를 공유할 수 없는 것이 웹 브라우저의 규칙임을 알아두자.

✅ CORS : Cross-Origin Resource Sharing

CORS는 SOP에서 예외를 두는 정책이다. (내 집에는 나만 들어갈 수 있어, 좋아 부모님은 예외로 할게!)

서버측에서 접근을 허용할 출처에 대해 규칙을 세워두어 그 출처는 SOP가 어긋나도 리소스를 공유할 수 있다.

응답 헤더에 다음과 같이 해주면 된다.

"Access-Control-Allow-Origin: 허용할 출처"

 

Node.js에서는 cors 미들웨어를 사용하여 CORS를 구현할 수 있다.

✅ CORS 진행 과정

1. 클라이언트가 다른 출처로 요청을 보내려고 함

2. 브라우저가 먼저 사전 요청 ( preflight ) 을 보냄

3. 서버가 응답 헤더에 "Access-Control-Allow-Origin"을 넣어줌

4. 브라우저가 허용됐는지 확인하고, 진짜 요청을 진행함

⭐ 결론

웹사이트를 만들다보면 겪게되는 CORS 이슈!

내가 JS만 할 줄 알았을 때는 너무 어려운 개념이었는데

Node.js까지 할 줄 알게된 지금은 참 쉽게 느껴지는 개념이다.

 

원래는 출처가 다르면 리소스 공유 불가능! ==> 특정 출처는 허용해서 공유 가능! 이게 CORS 정책이다

CORS 위반 에러가 발생하면 당황하지 말고 서버에서 그 출처를 허용해주자.