[Error] CORS 에러 개념 & 해결방법 (feat. SpringBoot)

 

 

CORS(Cross-Origin Resource Sharing)

CORS는 브라우저가 다른 출처(origin)로 보낸 요청의 응답을 JavaScript에서 접근할 수 있을지 결정하는 보안 정책입니다.

브라우저는 악성 사이트가 사용자의 인증 정보를 이용해 민감한 API 응답을 읽는 것을 방지하기 위해 기본적으로 다른 출처의 응답을 JavaScript에서 차단합니다.

 

 

다른 출처(origin)는 크게 

- 프로토콜: http / https
- 도메인(호스트): localhost
- 포트 : 3000, 8080

위 3가지로 구분됩니다.

 

 

프론트와 백을 기준으로 보면 어떤 사이트(3000)가 다른 사이트(8080)에 사용자의 쿠키를 포함해서 요청을 보내는 것을 예로 들 수 있습니다.

 

 

 

허용 방법

1. CorsConfig

package com.tistory.angelplayer.oauth.global.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

import java.util.List;

@Configuration
public class CorsConfig {

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();

        // ✅ 쿠키 포함 요청 허용 (credentials: 'include' 때문에 필수)
        config.setAllowCredentials(true);

        // ✅ 허용할 프론트 origin을 정확히 명시해야 함 (* 금지)
        config.setAllowedOrigins(List.of("http://localhost:3000"));

        // ✅ 허용 메서드/헤더
        config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        config.setAllowedHeaders(List.of("*"));

        // (선택) Set-Cookie 등을 브라우저에서 읽어야 할 때
        // config.setExposedHeaders(List.of("Set-Cookie"));

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return source;
    }
}

 

 

 

2. 코드 활성

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http
        .cors(Customizer.withDefaults())
        .csrf(csrf -> csrf.disable());

    return http.build();
}

CorsConfig를 활성화하는 코드를 SecurityFilterChain 내부에에 입력면 CORS 에러가 해결됩니다.

 

 

 

 

정리 : CORS는 브라우저가 다른 출처의 응답을 JavaScript에서 읽을 수 있을지 결정하는 보안 정책이며, Spring Security에서는 별도로 cors()를 활성화해야 적용됩니다.