Cors

브라우저는 기본적으로 SOP ( Same Origin Policy ) 정책을 따르고 있기에 같은 출처가 아닌 다른 출처 ( 도메인, 서브 도메인, 프로토콜, 포트가 다른 것 )에 요청을 보낼 경우 제한됨

다른 출처 간의 상호작용을 해야하므로 ( 다른 출처의 API를 사용한다던지 외부 리소스를 쓴다던지 )몇 가지 예외 조항을 두고, 이 조항에 해당하는 리소스 요청은 출처가 다르더라도 허용

⇒ CORS 정책을 지킨 리소스 요청
⇒ 즉, CORS 라는 정책에 위반되지 않으면 정상적으로 리소스를 요청할 수 있게 해줌

CORS란 ? ( Cross Origin Resource Sharing )

---

교차 출처 리소스 공유 ( 교차 출처 : 다른 출처 )

도메인이 다른 서버끼리 리소스를 주고 받을 때 보완을 위해 설정된 정책

도메인 1의 웹 브라우저가 도메인 2의 서버에서 리소스를 요청
도메인 2 서버는 응답을 반환하지만, 웹 브라우저는 CORS 정책을 검토 후 응답을 사용할지 결정
만약 CORS 정책이 지켜지지 않았다면 응답 받은 것을 폐기

• Origin ( 같은 출처와 다른 출처의 구분 )
  

같은 출처인지 다른 출처인지를 구분하는 방법은 URL의 구성 요소 중 Protocol, Host, Port 이 세 가지만 동일하면 됨

• Cors 정책의 검사 시점
  
  출처를 비교하는 로직이 서버가 아니라 웹 브라우저에 구현된 스펙이므로 만약 우가 Cors 정책을 위반하는 리소스 요청을 하더라도 해당 서버가 같은 출처에서 보낸 요청만 받겠다는 로직을 가지고 있는 경우가 아니라면 서버는 정상적으로 응답하고 이후 브라우저가 이 응답을 분석해서 Cors 정책 위반이라고 판단하면 이 응답을 폐기 즉, 서버는 Cors를 위반하더라고 응답은 하지만 웹 브라우저가 파기하는 형태
  

• ⭐ Cors 동작 3가지 ⭐
  
  브라우저는 요청을 보낼 때 Origin 헤더를 포함하며, 서버는 Access-Control-Allow-Origin 헤더로 응답하여 요청을 허용할지 결정

  1. Simple Request ( 단순 요청 )

     조건을 만족하면 별도의 검증 없이 바로 요청을 보냄

     Simple Request의 조건

     • HTTP 메소드: GET, HEAD, POST 중 하나
     • 추가적인 요청 헤더가 없음 (예: Authorization 같은 인증 헤더 사용 불가)
     • Content-Type이 다음 중 하나
       • application/x-www-form-urlencoded
       • multipart/form-data
       • text/plain

     동작 방식

     1. 브라우저가 Origin 헤더를 포함하여 서버에 요청 보냄
     2. 서버가 Access-Control-Allow-Origin 응답 헤더를 반환
     3. 브라우저가 확인 후 정상적인 응답 처리

     주의사항

     • application/json을 사용하면 Simple Request가 아님 ( Preflight Request로 전환됨 )
     • Authorization 헤더를 포함하면 Simple Request가 아님

  2. Preflight Request ( 사전 요청 )

     브라우저가 요청을 보내기 전에 "이 요청이 안전한지" 미리 확인하는 과정

     Preflight Request가 필요한 경우

     • 요청 메소드가 GET, HEAD, POST 외 다른 메소드 (예: PUT, DELETE)
     • Content-Type이 Simple Request에서 허용되지 않는 값 (예: application/json)
     • 추가적인 요청 헤더 포함 (예: Authorization, X-Custom-Header 등)

     동작 방식

     1. 브라우저가 OPTIONS 메소드로 Preflight 요청 보냄
     2. 서버가 허용할 Origin, 메소드, 헤더 정보를 응답 헤더로 반환
        • Access-Control-Allow-Origin: https://example.com
        • Access-Control-Allow-Methods: POST, GET, OPTIONS
        • Access-Control-Allow-Headers: Authorization, Content-Type
        • Access-Control-Max-Age: 86400 (Preflight 요청을 캐싱)
     3. 브라우저가 응답을 확인 후 본 요청( 실제 요청 ) 수행

     주의사항

     • Preflight 요청이 많아지면 성능에 영향을 줌
     • Access-Control-Max-Age를 설정하면 Preflight 요청을 캐싱하여 성능 최적화 가능

1. Credential Request ( 인증된 요청 )

   쿠키, 토큰 등 인증 정보가 포함된 요청

   Credential Request의 조건

   • 요청 시 쿠키나 인증 토큰 포함 (credentials 옵션 사용)

     fetch("https://example.com/data", {
       method: "GET",
       credentials: "include", // 쿠키 포함
     });

   • 서버 응답 헤더에 Access-Control-Allow-Credentials: true 필수
   • Access-Control-Allow-Origin 값은 ( 와일드카드 ) 사용 불가, 특정 Origin 지정 필요

     Access-Control-Allow-Origin: https://example.com
     Access-Control-Allow-Credentials: true

   동작 방식

   1. 클라이언트가 쿠키 또는 인증 정보를 포함하여 요청 보냄
   2. 서버가 Access-Control-Allow-Credentials: true 헤더를 포함하여 응답
   3. 브라우저가 응답을 확인 후 정상적인 요청 수행

   주의사항

   • Access-Control-Allow-Origin: * 와 Access-Control-Allow-Credentials: true를 함께 사용할 수 없음
   • 반드시 특정 Origin을 명시해야 함 (https://example.com 등)

CORS 예외: 왜 Postman은 CORS 정책에 안 걸릴까?

CORS는 브라우저에서만 적용되는 정책이기 때문!

• Postman, cURL 같은 외부 API 테스트 도구는 브라우저가 아니라 CORS 정책을 적용하지 않음
• 브라우저만 Origin 검사를 수행하여 CORS 위반 여부를 판단함

CORS 오류 해결 방법

1. 서버에서 CORS 허용 설정
   • Access-Control-Allow-Origin에 클라이언트 Origin 명시
   • Access-Control-Allow-Methods, Access-Control-Allow-Headers 설정
2. Preflight 요청 캐싱 (Access-Control-Max-Age 설정)
3. Credential 요청의 경우
   • Access-Control-Allow-Origin에 사용 불가
   • Access-Control-Allow-Credentials: true 설정

CORS 정책을 이해하고 적절한 설정을 하면, 다양한 도메인 간 안전한 통신이 가능하다!

CORS 정책에 따른 리소스 처리 흐름

---

웹 브라우저의 동작 원리

요청을 보낼 때 브라우저는 Origin 헤더를 포함

Origin: https://domain1.com

도메인 2 서버가 응답을 반환

• Access-Control-Allow-Origin 헤더가 포함되어 있어야 함
• Ex) 특정 출처 허용

  Access-Control-Allow-Origin: https://domain1.com

• 만약 이 헤더가 없거나 이 설정되지 않았다면? → 브라우저는 응답을 "폐기" (사용 불가)
  

브라우저가 응답을 확인

• Access-Control-Allow-Origin에 domain1.com이 없으면
• CORS 정책 위반으로 응답을 폐기하고, 콘솔에 오류 출력

즉, CORS는 서버가 응답을 보내는 것이 아니라, 브라우저가 이를 사용할 수 있는지 여부를 판단하는 보안 정책 !!