[Spring] CORS 에러를 해결하는 방법

CORS ( Cross Origin Resource Sharing , 교차 출처 리소스 공유 정책 )

• 한 도메인 또는 Origin 의 웹페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 엑세스 할 수 있게 하는 보안 메커니즘
• 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식

Origin ( 출처 )

• 출처가 무엇인지 알기 위해서는 URL의 구성 요소를 알고 있어야한다.
• https://www.wldnjsdl.tistory.com:3000/manage/newpost/?type=post#first
• 차례대로 프로토콜, 호스트, 포트번호, 경로, 쿼리스트링, Fragment 이렇게 나뉜다.
• 이 중 Origin은 프로토콜 + 호스트 + 포트번호 까지 합친 URL 이라고 할 수 있다.

CORS 에러 해결하기

CORS 에러를 해결하기 위해서는 서버에서 Access Control Allow Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 된다. 

 

1. @CrossOrigin 어노테이션

• 컨트롤러에서 특정 메서드 혹은 컨트롤러 상단에 @CrossOrigin 추가하는 방법
• 기본적으로 모든 출처, 모든 헤더, @RequestMapping 주석에 지정된 Http 메소드에 최대 30분을 허용하며 속성 값을 넣어 기본 값을 대체 가능하다.
• 하지만 컨트롤러가 많을 수록 설정해야하는 어노테이션이 많아진다는 단점이 있다.

@CrossOrigin(origin="*", allowedHeaders = "*", allowCredential = "*")
@Controller
public class MainController {
	@GetMapping(path = "/hello")
	public String main(Model model) {
		return "main";
	}
}

• origin : 허용된 출처
• allowedHeaders : 실제 요청 중에 사용할 수 있는 요청 헤더 목록
• allowCredential : 브라우저가 요청과 관련된 쿠키를 포함해야 하는가

2. CorsFilter 생성하기

• 커스텀 필터를 만드는 방식
• Access-Control-Max-Age: 클라이언트에서 preflight 의 요청 결과를 저장할 시간(sec)이다. 해당 시간동안은 preflight요청을 다시 하지 않게 된다.

@Component // Bean으로 등록하기 위해 프레임워크에게 알리기
public class SimpleCorsFilter implements Filter { // 꼭 javax.servlet의 Filter 사용하기

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT, PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}

 

3. WebMvcConfigurer 설정하기

• config 파일에서 CORS 정책을 설정
• addMaping: 해당 설정을 적용할 API 범위 선택 (/** 와일드 카드 사용 시 전체 적용)
• allowedOrigins: Origin을 허용할 범위 선택 , "*" 인 경우에는 모든 Origin 허락
• allowedMethods: 허용할 HTTP 메서드 선택
• exposedHeader: 서버에서 반환할 헤더 지정

@Configuration // 설정파일이라는 것을 표시
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Authorization", "Content-Type") // 클라이언트 측의 CORS 요청에 허용되는 헤더
                .exposedHeaders("Custom-Header")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

 

레퍼런스)

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

CORS란? CORS를 해결해보자 | 구보현 블로그

 

[Spring Boot] CORS 를 해결하는 3가지 방법 (Filter, @CrossOrigin, WebMvcConfigurer)

 

[Spring] Spring에서 CORS 이슈를 해결하는 방법

 

[Spring] CORS Filter 적용