인프런 커뮤니티 질문&답변

많은 분들이 GPT에서 알려주는 방법대로 하시는데.. ㅜㅜ

이상하게 이 부분이 버전을 좀 타네요..

우선 시큐리티가 추가되는 부분은 조금 뒤쪽인데 미리 추가하셨나 봅니다. 그렇다면 시큐리티 설정이 문제가 될 수 있습니다. 조금 뒤쪽 섹션에 보시면 인증 처리 부분이 있으실 겁니다.

해당 섹션 마지막에 항상 수업자료로 프로젝트 코드가 있으니 확인해 보시기 바랍니다.

우선 ServletConfig에서는 CORS 관련 설정은 없애 주시고..

package org.zerock.mallapi.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.format.FormatterRegistry;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import org.zerock.mallapi.controller.formatter.LocalDateFormatter;

@Configuration

public class CustomServletConfig implements WebMvcConfigurer{

@Override

public void addFormatters(FormatterRegistry registry) {

registry.addFormatter(new LocalDateFormatter());

}

// @Override

// public void addCorsMappings(CorsRegistry registry) {

// registry.addMapping("/**")

// .allowedOrigins("*")

// .allowedMethods("HEAD", "GET", "POST", "PUT", "DELETE", "OPTIONS")

// .maxAge(300)

// .allowedHeaders("Authorization", "Cache-Control", "Content-Type");

// }

}

SecurityConfig에서는 다음과 같이 작성해 보세요.

http.cors(httpSecurityCorsConfigurer -> {

httpSecurityCorsConfigurer.configurationSource(corsConfigurationSource());

});

http.sessionManagement(sessionConfig -> sessionConfig.sessionCreationPolicy(SessionCreationPolicy.STATELESS));

http.csrf(config -> config.disable());

@Bean

public CorsConfigurationSource corsConfigurationSource() {

CorsConfiguration configuration = new CorsConfiguration();

configuration.setAllowedOriginPatterns(Arrays.asList("*"));

configuration.setAllowedMethods(Arrays.asList("HEAD", "GET", "POST", "PUT", "DELETE"));

configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type"));

configuration.setAllowCredentials(true);

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

source.registerCorsConfiguration("/**", configuration);

return source;

}

안녕하세요, 인프런 AI 인턴입니다. 이상영님께서 질문해주신 내용에 대해 답변을 드리겠습니다.

CORS 에러는 서버와 클라이언트 간의 요청이 다른 도메인에서 발생할 때 보안 상의 이유로 요청이 차단되는 문제입니다. 주로 API 서버 측의 설정에 의해 발생하기 때문에 서버에서의 설정 변경이 필요할 수 있습니다.

1. Backend CORS 설정 확인: 이미 server-side에서 @CrossOrigin이나 addCorsMappings를 사용하여 CORS 설정을 하셨다면, 대부분의 경우 별도의 추가 설정은 필요하지 않을 수 있습니다. 하지만 특정 엔드포인트에서만 CORS를 허용해야 하는 경우 설정이 누락되었을 가능성도 있으니 이를 확인해보는 것을 추천드립니다.

2. Frontend CORS 설정:

   • 일반적으로 클라이언트 측에서는 CORS 설정을 따로 하지 않습니다. 클라이언트 측에서는 withCredentials: true와 같은 옵션 이외에 별다른 설정이 없습니다.
     
   • withCredentials: true를 사용했을 때는 서버 측에서 해당 요청이 인증된 요청임을 인식해야 CORS 설정이 올바르게 이루어질 수 있습니다. 이 경우 서버에서 Access-Control-Allow-Credentials: true 헤더가 필요합니다.
     

3. 관련 참고 자료:

   • CORS 설정에 대해 자세히 설명한 게시물
     
   • CORS 관련 문제 해결 방법을 제공하는 게시물
     

CORS는 주로 서버 설정의 문제로 발생하기에, 문제 해결을 위해서는 서버 엔드포인트의 CORS 정책을 자세히 검토한 뒤, 특정 매핑이나 적용이 누락된 곳이 없는지 확인하는 것이 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.