24.12.18 TIL CORS

1. CORS(Cross-Origin Resource Sharing)란 무엇인가?

CORS는 Cross-Origin Resource Sharing의 약자로, 브라우저에서 다른 출처의 리소스에 접근할 수 있도록 허용하거나 제한하는 보안 메커니즘입니다.

• 기본적으로 브라우저는 보안 정책(Same-Origin Policy)에 따라, 한 출처에서 다른 출처의 리소스에 접근하려고 하면 차단합니다.
• CORS는 이 정책을 우회하여 합법적으로 데이터를 주고받을 수 있도록 허용합니다.

---

2. Same-Origin Policy란?

Same-Origin Policy는 브라우저 보안을 강화하기 위한 규칙으로, 출처(origin)가 동일한 경우에만 리소스 요청을 허용합니다.

• 출처란 프로토콜, 호스트, 포트를 모두 포함한 URL을 말합니다.
  예)

  https://example.com:8080

  • 프로토콜: https
  • 호스트: example.com
  • 포트: 8080

출처 비교 예시

• 요청 출처: https://example.com:8080
  • https://example.com:8080/resource → ✅ 동일 출처 (허용)
  • http://example.com:8080/resource → ❌ 다른 출처 (차단)
  • https://example.com/resource → ❌ 다른 출처 (차단)
  • https://another.com:8080/resource → ❌ 다른 출처 (차단)

---

3. CORS가 필요한 경우

서버에서 다른 출처의 요청을 허용해야 할 때 CORS를 설정합니다.
예를 들어:

• 클라이언트: http://localhost:3000
• 서버: http://api.example.com

기본 Same-Origin Policy로 인해 클라이언트에서 서버로의 요청이 차단되지만, CORS를 설정하면 이를 허용할 수 있습니다.

---

4. CORS 동작 원리

CORS는 브라우저가 서버와의 통신에서 추가적인 HTTP 헤더를 사용해 요청과 응답을 처리합니다.

CORS 요청 종류

1. Simple Request:

   • GET, POST, HEAD 메서드 사용
   • Content-Type이 특정 값(application/x-www-form-urlencoded, multipart/form-data, text/plain)으로 제한됨
   • 브라우저가 요청을 바로 실행하며, 서버는 Access-Control-Allow-Origin 헤더로 응답

2. Preflight Request:

   • OPTIONS 메서드를 사용해 서버에 요청을 보내, CORS 정책이 허용되는지 사전 검증
   • 서버가 허용 헤더와 메서드를 명시한 응답을 보내면 본 요청 실행

---

5. CORS 관련 HTTP 헤더

1. 서버에서 설정하는 헤더

   • Access-Control-Allow-Origin: 허용할 출처를 명시

     Access-Control-Allow-Origin: *

     → 모든 출처 허용

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

     → 특정 출처 허용

   • Access-Control-Allow-Methods: 허용할 HTTP 메서드 명시

     Access-Control-Allow-Methods: GET, POST, PUT

   • Access-Control-Allow-Headers: 허용할 요청 헤더를 명시

     Access-Control-Allow-Headers: Content-Type, Authorization

   • Access-Control-Allow-Credentials: 쿠키와 같은 인증 정보를 포함할지 여부 설정

     Access-Control-Allow-Credentials: true

2. 클라이언트에서 설정하는 헤더

   • Origin: 요청을 보낸 출처를 명시

     Origin: http://localhost:3000

---

6. Spring에서 CORS 설정

Spring Boot에서는 간단하게 CORS 설정을 추가할 수 있습니다.

1) 컨트롤러 레벨

@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class MyController {
    @GetMapping("/data")
    public String getData() {
        return "Hello, CORS!";
    }
}

2) 글로벌 설정

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

---

7. CORS의 한계

• 보안 강화용이 아님: CORS는 클라이언트와 서버 간 신뢰를 보장하지 않으므로, 추가적인 인증/인가가 필요합니다.
• Preflight로 인한 성능 이슈: 사전 요청이 많아지면 서버에 부하가 걸릴 수 있습니다.

---

8. 마무리

CORS를 처음 접했을 때는 복잡하게 느껴졌지만, 실제로 API 요청과 응답 과정에서 필요성을 직접 경험하면서 이해가 더 쉬워졌습니다.
API 설계 시, 클라이언트-서버 간 안전한 데이터 통신을 위해 CORS 설정을 올바르게 적용하는 것이 중요하다는 점을 배웠습니다.