[Study] CORS

1. CORS란,

Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고도 부릅니다.

CORS는 SOP에 의해 제한된 교차 출처 간 리소스 공유를 허용하기 위한 방법입니다. 

 

여기서 SOP란, Same Origin Policy의 약자로 동일 출처 정책을 의미합니다.

SOP는 현재 출처와 동일한 출처(Origin)의 리소스만 접근할 수 있도록 하는 정책입니다. 

 

출처(Origin)은 Protocol + Host(Domain) + Port로 구성되며 모두 같은 경우가 동일 출처가 됩니다.

이 세 가지 중 하나라도 다르면 다른 출처(Origin)으로 간주되어 CORS 에러가 발생합니다.

 

애플리케이션의 요구 사항이 복잡해지면서, 다른 도메인의 리소스를 활용하는 경우가 많아졌기 때문에 등장한 프로토콜로, 서버에서 CORS 관련 헤더를 설정하여 다른 도메인에서의 리소스 요청을 허용할 수 있습니다. CORS 에러는 CORS 헤더를 적절히 설정하지 않은 상태에서 교차 출처 리소스를 요청하는 경우 발생할 수 있습니다.

 

예를 들어, `http://localhost:8080`에서 `http://localhost:8000`으로 요청하면, 포트가 다르기 때문에 다른 Origin으로 간주되어 브라우저가 요청을 차단합니다.

 

개발자 도구에서 location.origin 명령어를 입력하면, 해당 사이트의 origin을 확인할 수 있습니다. 

 

2. CORS 에러 해결 방법

서버에서 응답 헤더에 아래와 같은 설정을 추가하면 해결할 수 있습니다.

 

1. Access-Control-Allow-Origin: 접근 가능 url 설정 (예: `http://example.com`)

2. Access-Control-Allow-Methods: 접근 가능 HTTP 메서드를 지정 (예: `GET, POST`)

3. Access-Control-Allow-Credentials: 접근 가능 쿠키 설정

4. Access-Control-Expose-Headers: 접근 가능 헤더를 설정

 

참고: 브라우저의 보안 정책이므로 서버 간 요청(Postman 등)에는 적용되지 않습니다.

 

 

요약

CORS란 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고도 부릅니다.  

CORS는 SOP에 의해 제한된 교차 출처 간 리소스 공유를 허용하기 위한 방법입니다.

SOP란 동일 출처 정책을 의미하며, 출처(Origin)의 Protocol + Domain(Host) + Port가 모두 같은 경우가 동일 출처가 됩니다.

이 중 하나라도 다르면 서로 다른 Origin으로 간주되어 리소스 요청 시 CORS 에러가 발생합니다.

서버 응답 헤더에 접근 가능 url을 설정하는 등, CORS 설정을 추가하여 에러를 해결할 수 있습니다.