[JPA] 29. CORS란 뭘까?

[JPA] 29. CORS란 뭘까?

 

1. CORS 의 의미

• CORS(Cross Origin Resource Sharing) = 출처 간 리소스 공유 (다른 도메인에서 자원을 공유할 수 있게 해준다.)
• 기본적으로 웹 브라우저는 보안상의 이유로 동일 출처 정책을 적용하여, 다른 출처의 리소스에 대한 접근을 제한한다. 즉, 브라우저는 기본적으로 다른 출처로의 요청을 차단하지만 서버에서 이를 명시적으로 허용할 수 있다.
• => 동일 출처 정책(Same-Origin-Policy:SOP)의 반대 개념이 CORS이다.

 

*학교 도서관에 있다고 가정해보자. 도서관 내부에서는 책을 자유롭게 읽고 빌릴 수 있지만, 외부 건물에서는 접근이 제한된다.

 

 

2. CORS 설정하기

(1) 서버측 CORS 설정하기 (전역)

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 모든 경로에 대해 CORS 허용
                .allowedOrigins("http://localhost:3000") // 허용할 출처
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 허용할 HTTP 메서드
                .allowCredentials(true); // 쿠키, 세션 ID, HTTP 인증 헤더와 같은 사용자의 인증 정보
    }
}

 

 

(2) 서버측 CORS 설정하기 (컨트롤러)

  @CrossOrigin(origins = "http://localhost:3000")
  @GetMapping("/data")
  public String getData() {
      return "CORS 요청 성공!";
  }

스프링 부트에서 서버 측에 CORS 허용 설정을 하면, 서버가 클라이언트 요청에 대한 응답을 보낼 때 자동으로 Access-Control-Allow-Origin 헤더를 포함하게 된다. 이 헤더는 서버가 해당 출처에서 온 요청을 허용한다는 의미를 브라우저에 전달하는 역할을 한다.

 

(3) 자바스크립트 CORS 설정

	fetch('http://localhost:8080/data', {
	  method: 'GET',
	  credentials: 'include' // 쿠키나 세션 정보를 포함하는 옵션(고정 값) 
	})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));