CORS(x-csrf-token 헤더 허용)

반응형

프론트단에서 API 호출을 하는데 GET요청은 아무런 문제가 없으나 POST에서만 CORS에러가 발생하였다.

 

발생한 에러는 아래와 같다.

 

cess to XMLHttpRequest at 'http://localhost:8080/api/v1/board' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

 

 

글자그대로 x-csrf token 헤더를 허용하지 않아서 발생한 에러였다.

 

 

 

사용하는 서버에서 x-csrf를 허용해주면 해결된다.

난 스프링에서 Filter를 통해 cors를 관리하고 있었고 아래와 같이 x-csrf-token을 추가해 해결하였다.

 

 

@Override
protected void doFilterInternal(
    HttpServletRequest request,
    HttpServletResponse response,
    FilterChain filterChain
) throws ServletException, IOException {
    try{
        response.addHeader("Access-Control-Allow-Origin", ALLOWED_ORIGIN);
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS");
        // x-csrf-token 헤더 추가
        response.addHeader("Access-Control-Allow-Headers", "authorization, content-type, x-csrf-token");
        response.setIntHeader("Access-Control-Max-Age", 3600);
    }catch(Exception e){
        log.info("Cors Error : {}",e.getMessage());
    }
    filterChain.doFilter(request, response);

}