Spring Boot | RESTful API 호출시 Cross Origin Requests Sharing (CORS)

▶ Cross Origin Requests Sharing (CORS)

개발 중 프론트단에서 RESTful API 호출시 교차 출처 요청 차단, 동일 출처 정책으로 인해 http://localhost:port/~ 에 있는 원격 리소스를 차단하였습니다. (원인: ‘Access-Control-Allow-Origin’ CORS 헤더가 없음) 발생.

 

 

CORS는 서로 다른 출처(Origin) 간에 리소스를 전달하는 방식을 제어하는 체제이다. 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한하기 때문에 발생한다.
CORS 요청이 가능하려면 서버에서 특정 헤더인 Access-Control-Allow-Origin과 함께 응답할 필요가 있다.

 

📌스프링에서는 아래와 같은 방법으로 CROS를 Enabling 하는 2가지 방법을 제공하고 있다.

 

컨트롤러 방식 CORS 구성

@CrossOrigin 어노테이션을 추가하여 허용하려는 클라이언트 URL를 입력한다.

 

@CrossOrigin(origins = "http://localhost:3000")
@PostMapping("/member/find-by/email")
public MemberResponseDto findByEmail(@RequestBody MemberRequestDto memberRequestDto)

 

글로벌 CORS 구성

WebMvcConfigurer를 @Bean으로 등록하여 허용하려는 URL을 매핑한다.

 

registry.addMapping("/**").allowedOrigins("http://localhost:3000");

http://localhost:3000 의 모든 URL 요청을 허용한다.

 

특정 URL로 제한을 두려면 /** 대신 허용 하려는 URL을 넣어주면 된다.

 

package com.boot.member;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
public class MemberApplication {

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

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:3000");
            }
        };
    }
}

 

테스트 결과