CORS (Cross-Origin Resource Sharing)

CORS (Cross-Origin Resource Sharing)는 웹 페이지가 다른 도메인에 있는 리소스를 요청할 때 발생할 수 있는 보안 문제를 해결하는 메커니즘

 

 

• Access-Control-Allow-Origin: 요청을 허용할 도메인을 명시
• Access-Control-Allow-Methods: 허용할 HTTP 메소드(예: GET, POST 등)
• Access-Control-Allow-Headers: 허용할 HTTP 헤더
• Access-Control-Allow-Credentials: 쿠키나 인증 정보를 포함한 요청을 허용할지 여부

 

---

 

도메인이 다를 경우 메소드OPTION을 보내 허용된 origin, method등을 체크

 

CORS (Cross-Origin Resource Sharing)에서 Preflight OPTIONS 요청은 특정 조건을 만족하는 요청이 있을 때 자동으로 브라우저에서 보내는 HTTP 요청입니다. 이 요청은 서버가 실제 요청을 허용할지 확인하기 위해 사용됩니다. Preflight 요청은 OPTIONS 메서드를 사용하여 서버에게 "이 요청을 보내도 괜찮은지" 확인하는 과정입니다.

 

Preflight OPTIONS 요청이 보내지는 이유는 주로 다음과 같습니다:

1. CORS 정책에 의해 보호되는 자원에 접근하려는 경우
   다른 출처의 서버에 요청을 보내는 경우, 브라우저는 해당 서버가 CORS 정책을 준수하는지 확인하려고 합니다. 서버가 응답을 허용하는지 확인하기 위해 먼저 OPTIONS 요청을 보냅니다.
   
   
2. 특정 HTTP 메서드 사용 시
   예를 들어, PUT, DELETE 또는 PATCH와 같은 메서드는 기본적으로 Preflight 요청을 요구합니다. 이는 이러한 메서드들이 서버에 큰 영향을 미칠 수 있기 때문에, 서버가 이를 처리할 수 있는지 먼저 확인해야 하기 때문입니다.
   
   
3. 커스텀 헤더를 사용할 경우
   요청에 사용자 정의 헤더(예: Authorization, X-Requested-With 등)가 포함될 때도 Preflight 요청이 발생합니다. 기본적인 헤더가 아니라 특별한 헤더를 사용하려면 서버가 이를 명시적으로 허용해야 하므로, 브라우저는 Preflight 요청을 보냅니다.
   
   
4. 콘텐츠 타입이 application/json 또는 비표준 형식일 경우
   요청의 Content-Type이 application/json 또는 비표준 형식일 때도 Preflight 요청이 발생할 수 있습니다. 이는 서버가 해당 콘텐츠 유형을 처리할 수 있는지 확인하기 위함입니다.

Preflight 요청의 흐름

1. 브라우저는 실제 요청을 보내기 전에 OPTIONS 요청을 서버에 보냅니다.
   
   
2. 서버는 이 요청을 처리한 후, CORS 관련 헤더를 포함하여 응답을 반환합니다. (예: Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers)
   
   
3. 서버가 요청을 허용하면 브라우저는 실제 요청을 보냅니다.

따라서, 브라우저가 자동으로 Preflight OPTIONS 요청을 보내는 이유는 보안상의 이유로 다른 출처의 서버에 접근할 때, 서버가 해당 요청을 수락할 수 있는지 미리 확인하는 과정이기 때문입니다.

 

---

 

SpringBoot 예시

 

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(@SuppressWarnings("null") CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "OPTIONS")
                .allowedHeaders("*");


    }

}