TIL(20240913) [CS:네트워크] CORS

---

💡 CORS란 무엇이고 어떻게 구현할 수 있는가?

▶️ CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 다른 출처(도메인,프로토콜,포트)의 리소스에 접근할 수 있도록 허용하는 보안 메커니즘이다.

📌 CORS의 필요성 ?

• 기본적으로 웹 브라우저는 동일 출처 정책을 적용하여 다른 출처의 리소스 접근을 제한하며 웹 어플리케이션에서 다른 도메인의 API나 리소스를 사용해야 하는 경우가 많아 CORS를 통해 이를 안전하게 허용할 수 있도록 하기 위해서다.

왜 동일출처 정책이 생겨났을까?

• 다른 출처의 리소스에 대한 무분별한 접근을 제한하기 위해서
• 사용자의 민감한 정보가 무단으로 다른 출처로 전송되는 것을 막기 위해서
• 인증 상태를 나타내는 민감한 쿠키정보가 다른 출처로 전송되는 것을 방지
• CSRF 공격 방지: 사용자가 의도하지 않은 요청이 다른 출처에서 발생하는 것을 막아주기 위해서
• 허가되지 않은 출처에서 웹 어플리케이션의 데이터를 조작하는 것을 어렵게 함
• 웹 서비스의 API가 무단으로 사용되는 것을 방지
• 서버 리소스의 무분별한 사용을 제한하여 서비스 안정성 유지를 위해

### 📌 CORS의 작동원리

• CORS요청의 유형 2가지 : Simple , Preflight
• Simple – GET, HEAD, POST 메소드를 지원합니다. 사용자 정의 헤더를 포함하지 않습니다.

 // 요청
 GET /products/ HTTP/1.1
Host: api.domain.com
Origin: https://www.domain.com

// 응답
Http/1.1 200 OK
Access-Control-Allow-Origin: https://www.domain.com
Content-Type: application/json

• Preflight – preflighted 요청은 simple request와는 다른 유형의 CORS 요청이다. 브라우저에서 진짜 요청을 보내기 전에 미리 확인 요청을 보낸다. 이 요청은 OPTIONS 메소드를 사용한다.

 // 미리 확인요청
 OPTIONS /products/ HTTP/1.1
Host: api.domain.com
Origin: https://www.domain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Authorization, Content-Type

// 서버 응답
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.domain.com
Access-Control-Allow-Method: GET, POST, OPTIONS, PUT
Access-Control-Allow-Headers: Authorization, Content-Type
Content-Type: application/json

// 브라우저 CORS 요청
POST /products/ HTTP/1.1
Host: api.domain.com
Authorization: token
Content-Type: application/json
Origin: https://www.domain.com

정리하자면 preflight request의 경우 브라우저는 실제 요청전에 OPTION메서드를 사용하여 서버에 예비요청을 보내고 서버는 Access-Control-Allow-Origin등의 헤더를 통해 허용되는 출처와 메서드를 지정해서 응답하면 브라우저는 서버의 응답을 확인하고 허용된 경우에만 실제 요청을 진행한다.

** (*)와일드 카드 : 전체 허용 / 사용주의

📌 Spring에서 CORS 구현 방법은?

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("https://도메인(호스트)주소")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*")
            .allowCredentials(true);
    }
}

1. 서버 측 설정
   • Access-Control-Allow-Origin 헤더 설정
   • 허용할 HTTP 메서드 및 헤더 지정
2. 프록시 서버 사용
   • 프론트엔드와 백엔드 사이에 프록시 서버를 두어 CORS 문제 우회

참고 CORS란? CORS를 해결 CORS의 이해와 올바른 구현을 위한 가이드