CORS(Cross-Origin Resource Sharing)는 다른 출처(Origin) 간의 자원 공유를 허용할지 말지를 결정하는 보안 정책을 말한다.
브라우저는 보안상 이유로, 기본적으로 다른 출처의 리소스 요청을 제한한다. 예를 들어:
http://localhost:3000http://localhost:8080서로 포트가 다르므로 "다른 출처"로 간주된다. 이때 프론트엔드가 백엔드에 AJAX 요청을 보내면, 브라우저는 자동으로 CORS 정책을 검사하고, 백엔드가 명시적으로 허용하지 않으면 요청을 막는다.
Access-Control-Allow-Origin: <http://localhost:3000>
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
@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);
}
}
http.cors().configurationSource(request -> {
CorsConfiguration config = new CorsConfiguration();
config.setAllowedOrigins(List.of("<http://localhost:3000>"));
config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE"));
config.setAllowedHeaders(List.of("*"));
config.setAllowCredentials(true);
return config;
});