최대 1 분 소요

이전에도 CORS 설정을 해준다고 Spring Security 설정 클래스에도 적용하고, CORS 설정 클래스도 만들어줬었다.
하지만 애플 로그인 구현 후 테스트하는 과정에서 Invalid CORS request라는 에러와 함께 다음 단계로 넘어가질 않았다😂
이런저런 코드를 수정해보고 추가해본 결과 다음처럼 설정해주니 해결할 수 있었다!

CorsFilter

아래처럼 CorsFilter 클래스를 만들어주고 컴포넌트 스캔 대상이 되도록 @Component로 설정해주자.
@Order(Ordered.HIGHEST_PRECEDENCE)로 설정해줌으로써 가장 높은 우선순위로 CorsFilter를 체크하게 된다.
아래 코드는 preflight request에서 CORS 정책 위반으로 막히지 않도록 여러 header와 HTTP 메소드 설정을 해주고 있다!

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        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, Key, Authorization");

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

(선택) CorsConfig 삭제

이전에 CORS 설정을 위해 만들어줬던 클래스인데 어차피 OAuth에서 CORS 에러를 해결해주지 못해 삭제했다.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowCredentials(true);
    }
}

Reference

카테고리:

업데이트:

댓글남기기