CORS

CORS(교차 출처 리소스 공유) 란?

웹 애플리케이션이 다른 도메인이나 출처의 리소스에 접근할 수 있도록 해주는 규칙

---

작동원리

이미지 출처: https://www.descope.com/blog/post/cors-errors

1. 요청(첫번째 화살표)
   사용자가 웹 브라우저에서 특정 웹 페이지를 요청할 때 발생
   위그림에서는 example.com에서 api.example.com에 데이터를 요청하는 경우, 이 요청의 출처는 example.com

2. 요청 헤더(두번째 화살표)
   브라우저는 요청을 보낼 때 여러 헤더를 포함하며 이 중 Origin 헤더는 요청이 발생한 출처를 나타내고 서버는 이 헤더를 통해 요청의 출처를 확인함

3. 서버 응답(세번째 화살표)
   서버는 요청을 처리한 후 응답을 반환하며, 이 응답에 CORS 관련 헤더를 포함함 위 그림에서, Access-Control-Allow-Origin 헤더를 통해 허용된 출처를 명시합니다.

4. Access-Control-Allow-Origin(네번쨰 화살표)
   이 헤더는 서버가 특정 출처에서 오는 요청을 허용하는지를 정의하고 요청한 출처가 허용된 경우, 브라우저는 응답을 사용가능 그렇지 않으면 요청이 차단

---

CORS 오류 발생시 해결책

(has been blocked by CORS policy: 라고 뜨면서 API 통신 막히면 아주 짜증난다 CORS....)

1. 서버 측 CORS 설정 확인

• CORS 헤더 확인: 서버가 올바르게 CORS 헤더(Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers)를 설정하고 있는지 확인

• 올바른 경로 및 출처 설정: CORS 설정이 요청을 보내는 출처와 일치하는지 확인하고 특정 경로에만 CORS를 허용했다면 요청하는 경로가 그에 포함되어야 함

2. HTTP 메서드 확인
   요청에 사용되는 HTTP 메서드(GET,POST,PUT 등등)가 서버에서 허용된 메서드 목록에 포함되어 있는지 확인
3. 프리플라이트 요청 확인

• OPTIONS 요청 처리: CORS 요청은 종종 프리플라이트 요청(OPTIONS)을 포함합니다. 서버가 이 OPTIONS 요청에 대해 적절한 응답을 반환하는지 확인합니다.
• 올바른 응답 헤더: OPTIONS 요청에 대한 응답에 Access-Control-Allow-Origin 및 Access-Control-Allow-Methods 헤더가 포함되어야 합니다.

  프리플라이트: 실제 요청을 보내기 전에,서버가 해당 요청을 허용할지를 확인하기 위해 사용되는 것

---

Access-Control-Allow-Origin: 요청을 허용할 출처를 지정
Access-Control-Allow-Methods: 허용할 HTTP 메서드를 지정
Access-Control-Allow-Headers: 클라이언트가 요청 시 사용할 수 있는 사용자 정의 헤더를 지정

---

서버측 예시 코드

@Bean
public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 상용(실제 라이브 서비스중인 어플리케이션)에서는 모든 허용인 * 로 하면 안댐!!)
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }