SOP

• 동일 출처 정책(Same-Origin Policy, SOP)
• 동일한 출처, URL끼리만 API 등의 데이터 접근이 가능하도록 막음

CORS

• 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)
• SOP의 반대, 다른 출처간에 리소스를 공유할 수 있도록 허용
• 출처: 웹사이트, API
• 리소스: 데이터

사용

• 다른 출처끼리의 요청이 보내질 때, 요청에 Origin이라는 header를 추가

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};

header

요청

• 데이터가 다른 곳으로 전송될 때, 데이터의 맨 앞쪽에 붙은 보충 정보
• 받는 쪽의 IP 주소, 사용할 프로토콜이나 옵션
• 요청하는쪽의 scheme, 도메인, 포트

답장

• 지정된 Access-Control-Allow-Origin 정보를 실어서 보냄