SOP 그리고 CORS

script code 내부에서 cross-origin HTTP request를 제한하기 위해서 XML HTTP Request와 Fetch API 모두 SOP(Same-Origin Policy)를 따릅니다. SOP를 따른다는 것은 현재 어플리케이션이 load된 origin을 제외한 다른 origin에 resource 요청을 할 수 없다는 의미입니다.

same-origin 판단 기준
same-origin판단을 위한 기준으로 protocol, host, port가 있습니다.

https://velog.io/를 기준으로 https가 protocol, host가 velog.io를 의미하며 port는 명시되어 있지 않습니다.

domain이 다르더라도 통신이 가능하도록 HTML5에서 추가된 스펙이 바로 CORS(Cross Origin Resource Sharing)입니다.

CORS 적용 방법 : client

클라이언트에서는 기존의 동일 도메인 요청과 동일하게 구현하면 됩니다.
same-origin이 아닐 경우 XMLHttpRequest 객체가 preflight, actual 요청을 자동으로 처리하게 됩니다.

CORS 적용 방법 : server

• Access-Control-Allow-Origin
  CORS를 허용할 domain을 입력합니다. *을 입력하면 모든 domain에 대해 CORS를 허용합니다. 모든 domain에 대해 CORS를 허용할 경우 보안에 취약해지므로 주의합니다.
• Access-Control-Allow-Methods
  CORS를 허용할 method를 입력합니다. 유의할 점으로 CORS의 preflight 과정에서 OPTIONS method가 사용되므로 OPTIONS 메서드를 허용해주어야합니다.

참고

• 구루비 저장창고
• MDN