Frontend HTTP 요청 시, Cors Preflight Error로 인해 API 연동이 실패하는 현상

[daily1313]

Summary

• 로그인, 회원가입 로직을 제외하고, Client의 HTTP 요청시 Cors Preflight Error 발생

Describe

• Error Log

Access to XMLHttpRequest at 'http://(deploy ip)/api/allergy' from origin 
'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

To do

• OPTIONS 메서드로 요청이 들어올 때, CorsFilter 내의 doFilterInternal 메서드 내에서 HTTP_OK를 반환하도록 로직 수정

public class CorsFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(final HttpServletRequest request, final HttpServletResponse response,
                                    final FilterChain chain) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, OPTIONS, TRACE, PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, content-type, Authorization");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }

        chain.doFilter(request, response);
    }
}

Etc

• @weejinyoung 첨부한 template 적용