07.CORS

CORS 발생원리

• 클라이언트가 웹브라우저를 통해 사이트에 접속
• 프론트엔드 서버에서 뷰 또는 리엑트와 같은 페이지를 응답
• 프론트엔드 서버는 보통 3000번대를 띄워서 테스트 실행
• 응답 받은 페이지에서 내부의 특정 데이터를 API 서버에 호출
• API 서버는 8080 포트에서 보통 응답하게 된다
• 그렇게 되면 프론트엔드와 API서버의 포트가 달라지게 되고,
• 웹 브라우저에서 교차 출처 리소스 공유를 금지시키게 되어 데이터가 보이지 않게 된다
• 이것을 허용하게 하기위해 서버에서 CORS 설정을 처리해야 프론트에서 데이터가 보이게 된다

---

• 방법1. 시큐리티에서 처리
• 방법2. MVCConfig에서 처리
• 두개를 모두 처리해줘야 한다.
• 왜냐하면 기본적인 요청의 경우 컨트롤러로 들어오기 때문에 MVCConfig가 처리하고

• 로그인 같이 시큐리티 필터를 타는 경우. 시큐리티에서 설정하지 않으면 토큰이 리턴되지 않는 문제가 발생할 수 있음

• SecurityConfig

// CORS 설정
http
      .cors((cors) -> cors
              .configurationSource(new CorsConfigurationSource() {
                  @Override
                  public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {

                      CorsConfiguration configuration = new CorsConfiguration();

                      configuration.setAllowedOrigins(Collections.singletonList("http://localhost:3000"));
                      // 허용할 앞단의 포트 번호
                      configuration.setAllowedMethods(Collections.singletonList("*"));
                      // 허용할 메서드 종류. * 는 All
                      configuration.setAllowCredentials(true);
                      // 앞단에서 Credentials 설정을 하고 이것을 true로 받아야한다
                      configuration.setAllowedHeaders(Collections.singletonList("*"));
                      // 허용할 헤더
                      configuration.setMaxAge(3600L);
                      // 허용을 물고있을 시간
                      configuration.setExposedHeaders(Collections.singletonList("Authorization"));
                      // Authorization에 JWT를 넣어서 보내주기 때문에 이것도 허용시켜야 함
                      return configuration;
                  }
              }));

• CorsMvcConfig

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 CorsMvcConfig implements WebMvcConfigurer {

  @Override
  public void addCorsMappings(CorsRegistry registry) {

      registry.addMapping("/**")
              .allowedOrigins("https://localhost:3000");
      // 모든 컨트롤러 경로에 대해서 localhost:3000에서 오는 요청에 대해 허용
  }
}

참고 사이트

개발자 유미