CORS

지난번 웹 관련 개발을 하면서 CORS 에러에 마주쳤고 크롬의 확장프로그램을 사용해서 해결했다. 급하게 개발하느라 CORS에 대해 이해하지 못하고 그냥 넘겼던터라 최근에 내용을 정리해야겠다는 생각이 들었다.

 

CORS : Cross-Origin Resource Sharing의 준말로 교차 출처 리소스 공유이다.

출처가 같은 경우 : URL의 Scheme, Host, Port가 동일한 경우 (이 중 하나라도 다르면 Cross-Origin)

지난번 개발에선 백엔드 API와 프론트의 포트가 서로 달라서 Cross-Origin 이었다

 

CORS의 동작 방식

1. Simple Requests : GET, HEAD, POST 중 하나의 메서드의 호출, Accept, Accept-Language, Content-Language, Content-Type(application/x-www/form-urlencoded, multipart/form-data, text/plain)의 헤더

예비 요청이 없이 바로 본 서버에 요청한 후 서버의 응답의 헤더에 Access-Control-Allow-Origin을 보내주면 그때 CORS의 정책 여부를 검사하는 방식

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

 

2. Preflighted Requests : Simple Requests와 달리 먼저 OPTIONS 메서드를 톻애 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인. 즉 미리 전송(preflighted)을 하는 방식

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

3. Requests with credentials : 기본적으로 XMLHttpRequest 또는 Fetch 호출에서 브라우저가 인증과 관련된 정보를 담게하는 옵션방식(withCredentials)

 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

 

 

해결방법

1. CorsFilter 생성 : @Component 어노테이션을 추가한 후 Filter(javax.servlet의 Filter) 인터페이스를 구현

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @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", "http://localhost:3000");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods","*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Authorization");

        if("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        }else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void destroy() {

    }
}

 

 

2. @CrossOrigin 어노테이션을 사용하여 해당 컨트롤러에 달아준다

 

 

 

 

참조 : 

 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

https://wonit.tistory.com/572