• 참고 링크

<aside> 🚨 Access to XMLHttpRequest at ‘https://api.com/users’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

</aside>

• 웹 개발을 하다보면 흔하게 마주하는 CORS! 서버와의 통신으로 데이터를 받아올 때 주로 등장하는 이 오류 😂 왜 발생하는 걸까?

SOP 와 CORS 란?

• 둘 다 다른 출처의 리소스 요청 (도메인 또는 포트가 다른 서버의 자원을 요청) 에 관련된 보안 정책임.
• 다른 출처로 리소스를 요청한다면 SOP 정책을 위반한 것이 되며, SOP 의 예외 조항인 CORS 정책까지 지키지 않는다면 아예 다른 출처의 리소스를 사용할 수 없음!

SOP(Same-Origin Policy) 란?

• RFC 6454 에서 처음 등장한 보안 정책으로, 말 그대로 "같은 출처에서만 리소스를 공유할 수 있다"는 규칙을 가진 정책임.

CORS(Cross-Origin Resource Sharing) 란?

• "교차(다른) 출처 리소스 공유"라고 해석할 수 있음.
• 오픈된 공간인 웹에서 다른 출처에 있는 리소스를 가져오는 일은 굉장히 흔하고, 무작정 막을 수도 없기 때문에 몇 가지 예외 조항을 두고 이 조항에 해당하는 리소스 요청은 출처가 다르더라도 허용하는 규칙을 가진 정책임.
• 우리가 겪는 CORS 관련 이슈는 모두 CORS 정책을 위반했기 때문에 발생하는 것임.

+) 출처(Origin) 는 무엇인가?

• 출처는 위의 형태에서 :80 , :443 과 같은 포트 번호까지 모두 합친 것을 의미함. 즉, 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들의 집합을 뜻함.

• 같은 출처와 다른 출처를 구분하는 방법은 간단함. 위와 같은 URL 구성 요소 중 Scheme(Protocol) , Host , Port 3가지가 동일한 경우 같은 출처라고 판단함.

  +) 출처에 포트 번호가 명시적으로 포함되어 있는 경우, 포트 번호까지 모두 일치해야 같은 출처라고 인정됨. (포함되어 있지 않다면 고려 대상이 아님)

CORS 가 필요한 이유