CORS

CORS ( Cross-Origin Resource Sharing )

 

1️⃣ CORS 란?

웹 브라우저에서 다른 출처(origin)의 리소스를 요청할 수 있도록 하는 권한 체제이다.

대부분의 클라이언트 사이드 렌더링에서는 두 개의 다른 서버가 운영이 되는데, 하나는 프론트엔드 서버로, 주로 리액트와 같은 클라이언트 사이드 렌더링 프레임워크를 사용하여 사용자 인터페이스를 렌더링한다.

또 다른 하나는 백엔드 서버로, 주로 스프링과 같은 서버 사이드 프레임워크를 사용하여 데이터 처리, 인증 및 다른 비즈니스 로직을 처리한다.

리액트 어플리케이션에서 API 호출을 할 때, 프론트엔드 서버와 백엔드 서버는 서로 다른 주소와 포트에서 실행될 수도 있다. 따라서 요청을 처리하기 전에 사용자가 실제로 그들 자신임을 확인하는 과정 (인증)을 거쳐야 한다.

백엔드 서버에서는 CORS 정책을 통과하도록 설정을 추가하거나, 리액트 애플리케이션에서의 요청을 승인하도록 하는 코드를 작성해야 한다.

웹 브라우저가 다른 출처에서의 리소스에 접근할 때 발생하는 오류를 CORS 에러 라고 한다.

 

---

 

2️⃣ 출저(Origin)가 일치한다는 것은 뭘까?

 

두 URL의 구성 요소 중 Protocol, Host, Port 세 가지가 동일한 것을 동일 출처라고 한다.

 

---

 

3️⃣ 설정 방법

여러 방법 중 주로 전역 설정을 이용해 설정한다.

 

   1. config 패키지를 만들어준다. 경로는 /src/main/java/{project}/config

 

   2. 만들어진 config 패키지 안에 WebConfig 클래스를 만들어준다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
	...
}

 

     - 클래스 상단에 @Configuration 어노테이션을 작성해 설정 파일 이라는 것을 알려준다.
     - WebMvcConfigurer를 implements 한다.

 

   3.  인터페이스 WebMvcConfigurer 를 구현하고 addCorsMappings() 메소드를 오버라이딩 한다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    }
}

 

   

   4. 속성

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Authorization", "Content-Type")
                .exposedHeaders("Custom-Header")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

 

• addMapping
  CORS를 적용할 URL 패턴을 정의한다.
  "/somePath/**" 로 적용해도 되고,  "/**" 처럼 와일드 카드를 사용할 수도 있다.
  
  
• allowedOrigins
  자원 공유를 허락할 Origin을 지정할 수 있다.
  

  .allowedOrigins("http://localhost:8080", "http://localhost:8081");​

  
  이렇게 한 번에 여러 origin을 설정할 수도 있고
  "*" 로 모든 origin을 허락할 수도 있다. 
  
  
• allowedMethods
  허용할 HTTP method를 지정할 수 있다.
  "*"를 사용해 모든 method를 허용할 수도 있다.
  
  
• allowedHeaders
  클라이언트 측의 CORS 요청에 허용되는 헤더를 지정할 수 있다.
  기본적으로 Content-Type, Accept 및 Origin과 같은 간단한 요청 헤더만 허용된다.
  
• exposedHeaders
  클라이언트 측 응답에서 노출되는 헤더를 지정한다.
  
  
• allowCredentals
  클라이언트 측에 대한 응답에 credentials(예: 쿠키, 인증 헤더)를 포함할 수 있는지 여부를 지정한다.
  기본값은 false로 되어있다.
  
  
• maxAge
  원하는 시간만큼 pre-flight 리퀘스트를 캐싱 해둘 수 있다.

 

---

 

 

 4️⃣ 프로젝트 적용

1.패키지와 클래스를 생성해주었다.

2. 클래스에 어노테이션 적용과  WebMvcConfigurer를 implements 했다.

오버라이드

재정의 해준 모습

 

---

 

참고
https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0