CORS에 대해 간단하게 설명해주세요.

브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한한다.
서로 다른 도메인의 리소스 요청을 보내고 받게 되면, CORS 에러가 발생한다 !
예시로, 프론트엔드와 백엔드가 협업하게 되면, 각각 따로 서버를 띄우기에 CORS 문제가 발생할 수 있다.

 

그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다.
만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다.

 

 

.❗❕❗

 

이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데,

이를 CORS(Cross-Origin Resource Sharing)라고 부른다.

 

그래서 브라우저에서 cross-origin 요청을 안전하게 할 수 있도록 하는 메커니즘이다.

 

---

CORS란, (=Cross Origin Resource Sharing)

서로 다른 도메인간에 자원을 공유하는 것을 의미하며 기본적으로 차단되어 있다.

 

Origin이란 출처를 의미하며 Protocol + Host + Port를 합친 것을 말한다.

Origin이 같으면 CORS 에러는 발생하지 않는다.

 

url 구조

 

예를 들어 아래 개발 환경은 포트가 다르기 때문에, Origin이 다른 것으로 판단되어 자원 요청 시 CORS 에러가 발생한다.

• http://localhost:8080
• http://localhost:8000

 

---

CORS 에러 해결 방법

CORS를 통해 다른 출처 리소스에 접근하기 위해서는 HTTP의 헤더를 사용해야 하는데, 이 방법을 통해 브라우저에게 권한을 부여하도록 알려줄 수 있다.

 

이 방법은 Simple request, Preflight 2가지 방법으로 나뉜다.

 

Simple request

• preflight를 사용하지 않고 바로 CORS 요청을 한다.
• GET, POST, HEAD Method 중 하나
• 서버는 request의 Origin의 정보 검사 후 옳다고 판단한 경우 Access-Control-Allow-Origin에 Origin 또는 *을 담아 response를 보낸다. Access-Control-Allow-Origin에 정보가 없다면 응답은 실패이다.

 

1. 조건에 맞춰 HTTP 헤더 작성 후 서버에 request를 보낸다.
2. 서버에서 request의 헤더 정보를 검사하고 Origin에 정보를 담아 응답한다.
3. response 헤더의 Access-Control-Allow-Origin안을 확인하고 서버가 요청을 허용하는지 브라우저가 확인한다.
4. 만약 헤더에 정보가 있다면 리소스에 접근할 수 있고, 없다면 에러가 발생한다.

 

Preflight

• 실제 요청을 하기 전에 이 도메인이 안전한지 확인하기 위한 request이다.
• GET, POST 뿐만 아닌 PATCH와 DELETE와 같은 메서드를 사용할 때 필요하다.
  • 안전하지 않은 요청을 할 때 사용이 되는데, 안전하지 않은 요청이란 데이터에 직접적인 영향을 줄 수 있는 요청이라 할 수 있다. GET, POST 뿐만 아닌 PATCH와 DELETE와 같은 메서드를 사용할 때 필요하다.

• preflight는 OPTIONS 메서드와 두가지의 헤더가 사용된다.
  • Access-Control-Request-Method: 요청하는 메서드
  • Access-Control-Request-Headers: 추가적인 헤더

 

1. 본 요청을 보내기 전 preflight request를 서버에 보낸다.
2. 서버가 허락한다면 HTTP Status 200과 Access-Control-Request-Method , Access-Control-Request-Headers 를 응답한다. 만약 아니라면 에러를 발생시킨다.
3. 이후부턴 Simple request 요청과 같다.

 

---

# 요약

CORS란 서로 다른 Origin간에 자원을 공유하는 것을 말하며 기본적으로 브라우저간에 차단되어있다.

Origin이란 출처를 말하며, Protocol + Host + Port를 합친 것을 의미한다.

CORS 에러는 서버에서 응답 헤더에 특정 헤더를 포함하는 방식으로 해결할 수 있다.

예를 들어 Access-Control-Allow-Origin을 통해 브라우저가 리소스에 접근이 가능하도록 허용할 수 있다.

CORS를 통해 다른 출처 리소스에 접근하기 위해서는HTTP의 헤더를 사용해야 하는데, 이 방법을 통해 브라우저에게 권한을 부여하도록 알려줄 수 있다. 이 방법은 Simple request, Preflight 2가지 방법으로 나뉜다.