1. 개념

• CORS는 서버가 클라이언트의 다른 출처에서 오는 요청을 어떻게 처리할지를 정의하는 것이다.

• 서버에서 CORS 정책을 설정하여 클라이언트가 다른 출처에서 보낸 요청을 허용할지, 어떤 방식으로 허용할지를 결정한다.

• 아래의 구성요소 중에서 Protocol + Host + Port 3가지가 같으면 동일 출처(Origin)라고 한다.
  

• CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 되면, 다른 사이트에서 원래 사이트를 흉내낼 수 있게 된다. 브라우저에서 보호하고, 필요한 경우에만 서버와 협의하여 데이터를 요청할 수 있도록 하기 위해서 필요하다.

2. 예시

3. 요청 유형

• 브라우저가 CORS 요청을 어떻게 다루는지에 대한 기준

3-1 simple request

• 기본적인 조건을 만족하는 CORS 요청으로 이러한 요청은 프리플라이트(OPTIONS) 요청을 필요로 하지 않으며, 직접 서버에 요청을 보낼 수 있습니다.

1. HTTP 메서드 : GET, POST, HEAD 중 하나여야 합니다.

2. 헤더 : Accept , Accept-Language, Content-Language
Content-Type 이외의 헤더가 포함될 경우 Simple Request가 아닙니다.

3. Content-Type : application/x-www-form-urlencoded, multipart/form-data, 또는 text/plain 중 하나여야 합니다.

3-2 preflight

• Preflight Request는 브라우저가 CORS 요청을 보내기 전에 서버에 CORS 정책을 확인하기 위해 OPTIONS 메소드를 사용하여 보내는 요청입니다. 이 요청은 서버가 실제 CORS 요청을 허용할지 확인하기 위한 사전 요청입니다.
• simple request의 조건이 아닌 요청들은 다 preflight입니다.

fetch('https://example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // Simple Request에 정의되지 않은 Content-Type
    'Authorization': 'Bearer token' // 사용자 정의 헤더
  },
  body: JSON.stringify({ key: 'value' })
})

3-2-1 preflight 과정

1. 클라이언트는 OPTIONS 메소드로 프리플라이트 요청을 보냅니다.

2. 이 요청에는 Access-Control-Request-Method와 Access-Control-Request-Headers 헤더가 포함됩니다. 이 헤더들은 실제 요청에서 사용할 메소드와 헤더를 명시합니다.

3. 서버는 CORS 관련 헤더를 포함한 응답을 반환합니다. 주요 헤더는 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등입니다.

4. 클라이언트가 서버의 응답을 기반으로 CORS 정책을 확인한 후, 실제 요청을 보냅니다.

-출처
https://hannut91.github.io/blogs/infra/cors
https://escapefromcoding.tistory.com/724