CORS what is it ..

백엔드 개발자라면 프론트엔드 개발자에게 셀 수 없이 받아본 CORS 에러 수정 요청 .. so sad ..

마주칠때마다 그만 구글링하고 싶어서 개념부터 원리, 해결 방법까지 모두 다뤄보려 한다.

CORS 란 ?

Cross-Origin Resource Sharing의 약자로, 교차-출처 리소스 공유이다.

Origin이란 ?

origin(출처)이란 protocol, Host, 포트번호를 합친 것을 말한다.

❔ 왜 대부분의 url의 포트번호가 생략되어 있을까 ❔
http는 80번 https는 443번으로 기본 포트 번호가 정해져 있기 때문이다.

CORS 동작 흐름

웹에서 다른 출처로 리소스를 요청할 때는 HTTP 프로토콜을 이용하며, 브라우저는 요청 출처(https://www.cozytrain.com)를 origin 필드에 담아 보낸다.

서버에서는 허용된 출처를 Access-Control-Allow-Origin 헤더에 담아 응답한다.

응답을 받은 브라우저는 요청한 origin 과 Access-Control-Allow-Origin 를 비교하여 응답이 유효한지 결정한다.

💡 해결 방법

Spring Boot 프레임워크에서 필자가 주로 활용하는 방법은 1번 WebMvcConfigurer 방법이고, @CrossOrigin 어노테이션 방법 등 다양한 방법이 있다.

1. WebMvcConfigurer

	@SpringBootApplication
	public class CozytrainApplication {

      public static void main(String[] args) {
          SpringApplication.run(CozytrainApplication.class, args);
      }

      @Bean
      public WebMvcConfigurer corsConfigurer() {
          return new WebMvcConfigurer() {
              @Override
              public void addCorsMappings(CorsRegistry registry) {
                  registry.addMapping("/**")
                          .allowedOrigins("*")
                          .allowedMethods(HttpMethod.GET.name(), HttpMethod.POST.name(), HttpMethod.PUT.name(),
                                  HttpMethod.DELETE.name(), HttpMethod.HEAD.name(), HttpMethod.OPTIONS.name(),
                                  HttpMethod.PATCH.name())
                          .maxAge(1800);
              }
          };
      }
}

2. @CrossOrigin 어노테이션

   
   @RestController
   @RequestMapping("/message")
   @RequiredArgsConstructor
   @CrossOrigin(origins = "http://localhost:3000") // controller에서 설정
   public class MessageController {
     
     @GetMapping("check")
     @CrossOrigin(origins = "http://localhost:3000") // 메서드에서 설정
     public ApiUtils.ApiResult<String> testCheck(){
         return success("check(수정)");
     }
   }

참고: https://velog.io/@jh100m1/CORS-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%AD%94%EB%8D%B0-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94%EA%B1%B4%EB%8D%B0