[Side Project] CORS 설정 & Preflight

✅ WebConfig CORS 설정

• SOP (Sam Origin Policy) : 어떤 출처에서 다른 출처의 리소스를 사용하는 것을 제한하는 보안양식
  
  예전에는 당연히 같은 도메인에서의 출처만 리소스를 허용했고 다른 출처일경우 악의적인 요청이라고 생각했다.
  하지만 시간이 지남에 따라서 FRONT BACK나뉘는등 다른도메인을 호출해서 사용하는 경우가 많아졌다
  
  
• Origin Example : http://localhost:8082 (프로토콜 + 호스트 + 포트)
• EX) http://locaohost:8082 -> http://localhost:8080/api/health 호출시 다른 Origin 이므로 브라우저에서 에러
  
  
• CORS (Cross-Origin Resource Sharing) : 다른 출처에 리소스를 공유하는 것

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/api/**")
               .allowedOrigins("*")
               .allowedMethods(
                       HttpMethod.GET.name(),
                       HttpMethod.POST.name(),
                       HttpMethod.PUT.name(),
                       HttpMethod.PATCH.name(),
                       HttpMethod.DELETE.name(),
                       HttpMethod.OPTIONS.name()
               );
    }
}

 

 

✅ Preflight Request (사전요청)

• 웹브라우저는 기본적으로 cross origin에 대해서 HTTP 요청 전에 서버측에서 해당 요청을 보낼수 있는지 확인하는 Preflight Request(사전요청)을 보냄
• Preflight Request는 HTTP OPTIONS 메소드를 사용
• Preflight Request를 사용하는 이유는 CORS 오류는 웹브라우저에서 발생하기 때문에 서버에서는 정상적으로 요청을 처리했는데 클라이언트에서는 오류가 난 것처럼 보일 수 있기 때문에 Preflight Request를 이용하여 사전에 확인

✅ Preflight Request 생략

• 모든 요청이 Preflight를 발생시키는 것은 아니고 아래 조건을 모두 만족하는 요청의 경우는 단순 요청(Simple Requests)이라고하며 Preflight가 발생하지 않음
  • HTTP Method: GET, HEAD, POST
  • 수동으로 설정한 헤더가 다음인 경우 : "Accept", "Accept-Language", "Content-Language", "Content-Type"
  • 단, Content-Type 헤더의 경우 "application/x-www-form-urlencoded", "mulipart/form-data","text/plain"값들일 경우에만 Preflight가 발생하지않음

✏️공부한 내용

• CORS오류는 프론트와의 협업에서도 많이 봤었던 내용이었는데 CORS CONFIG를 해서 해결해야된다
• Preflight는 결국 서버단에서는 CORS오류가나도 안타나지는데 Preflight로인해서 알수있게 해주는것