CORS란 + 스프링부트에서 CORS 에러 해결하기

Origin (출처)

Protocol + Host + Port

셋 중 하나만 달라도 다른 출처를 나타낸다.

SOP (Same-Origin Policy)

-> 동일 출처 정책

-> 웹 브라우저가 SOP를 지키는 경우, 다른 출처의 리소스 (API 호출 등) 사용 불가

-> 보안성이 뛰어나다.

-> 그러나 외부에서 API를 호출하는 것이 불가피하므로, 이를 위한 예외조항이 있는데 이것이 CORS이다.

 

CORS (Cross-Origin-Resource Sharing)

-> 교차 출처 리소스 공유

-> 브라우저에서 다른 출처의 리소스를 공유하는 방법

-> CORS 정책을 위반하면 CORS 에러가 발생한다.

 

CORS 동작 방법

1. 단순 요청 방법 (Simple Request)

• 서버가 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보내면 브라우저가 이를 확인하고 CORS 동작을 수행한다.
• 단순 요청 방법을 사용하려면
  1. GET, POST, HEAD 중 하나의 메소드여야 하며
  2. 헤더는 Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 중 하나여야 하고
  3. Content-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나를 사용해야 한다.

2. 예비 요청 방법 (Preflight Request)

• 서버에 예비 요청을 보내고 안전한지 확인 후, 본 요청을 다시 보내는 방법이다.
• GET, POST 등의 메소드 대신 OPTIONS이라는 메소드를 통해 서버에 요청한다.
• 예비 요청을 받으면 서버가 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보내면 브라우저가 이를 확인하고 안전하다고 판단되면 본 요청을 보낸다.

백엔드(스프링부트)에서 CORS 에러 해결하기

CORS에러를 서버 쪽에서 해결하려면 Access-Control-Allow-Origin 헤더에 접근을 허용할 출처를 작성하면 된다.

WebConfig.java를 작성한다.

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 WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST");
    }
}

allowedOrigins에 "*"이라고 지정하면 모든 출처를 허용한다는 의미이다.