[Network] CORS란?

spring boot와 vue.js 를 사용한 게시판 만들기 토이 프로젝트를 진행하던 중, CORS 이슈를 확인했다. CORS 에 대한 개념이 전무하여 공부를 한 후 정리했다.

 

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)

교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

 

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청들을 제한한다. 동일 출처 정책(Same-Origin Policy)을 따르는  API(XMLHttpRequest, FetchAPI)를 사용하는 웹 어플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

참고로 두 URL의 프로토콜, 포트, 호스트가 모두 같아야 동일한 출처라고 할 수 있다.

 

예를 들어, localhost:8080에서는 호스트와 포트 번호가 모두 같은 localhost:8080에 있는 리소스만 불러올 수 있으며 localhost:9090에서 리소스를 받아 오려면 localhost:9090 측에서 올바를 CORS 헤더를 포함한 응답을 반환해야 한다는 뜻이다.

 

단순 요청(Simple Requests) 의 경우

Simple request는 다음 조건을 모두 충족하는 요청이다.

다음 중 하나의 메서드

• GET
• HEAD
• POST

자동으로 설정된 헤더를 제외한, 설정할 수 있는 헤더만 변경

• Accept
• Accept-Language
• Content-Language
• Content-Type

Content-Type은 다음의 값만 허용

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

클라이언트는 서버로 요청할 때 HTTP 요청 헤더에 Origin 값을 포함하고 서버는 HTTP 응답 헤더에 Access-Control-Allow-Origin .값을 포함한다.

Origin과 Access-Control-Allow-Origin의 값을 비교하여 유효한 요청이라면 리소스를 응답하고, 유효하지 않다면 브라우저에서 이를 막는다.

 

프리플라이트 요청(Preflighted Requests) 의 경우

이해 부족으로 추후 정리 예정

 

인증정보를 포함한 요청(Credentialed Requests)의 경우

이해 부족으로 추후 정리 예정

 

 

 

 

 

참조
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
https://hannut91.github.io/blogs/infra/cors