JAVA Spring boot) 소비기록앱 소비일기 서버(Backend) 개발일지 5 - 서버에서 CORS 차단문제 해결하기!!

• 작성일 : 2022.08.30

• 작성자 : 황시아

• 팀원 : 박승지, 황시아
• GitHub Repository : https://github.com/miro7923/soil
  
  
  

개발환경

• MacBook Air (M1, 2020)
• OpenJDK 11
• IntelliJ IDEA Community Edition
• Spring Boot 2.7.3
• MySQL Workbench 8.0.28
  
  
  

기간

• 2022.8.15 ~
  
  
  

주제

• 오늘의 소비에 대한 기억과 감정을 기록으로 남기고 나중에 되돌아보는 시간이 있었으면 좋겠다는 생각에 진행하게 된 프로젝트이다.
• 새로 산 물건의 사진을 찍고 그에 대한 감상을 함께 글로 남길 수 있는 기능을 메인으로 제작할 것이다.
  
  
  

진행상황

• 모든 진행은 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 강의를 기반으로 했다.

• 어제 만든 API 서버가 포스트맨에선 요청 응답이 잘 되길래 문제가 없을 줄 알았으나… 프론트 개발자가 실제 웹 화면 개발을 진행하며 요청을 보내고 응답을 받는 과정에서 CORS 정책에 막혀 응답을 제대로 받지 못하는 문제가 생겼다. 주륵…🥲
• 위 문제가 생긴 이유는 프론트 개발자는 내 컴퓨터의 로컬 서버를 ngrok으로 포트포워딩 시킨 주소로 요청을 보내고 응답을 받기 때문이다. 그래서 외부 URL이라 CORS에 차단된 것 같았다.

CORS 인터셉터 생성

• 먼저 스프링 인터셉터를 이용해 인터셉터 클래스를 생성한다.

package august.soil.web.interceptor;

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Slf4j
public class CorsInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String requestURI = request.getRequestURI();
        log.info("Cors requestURI [{}]", requestURI); // 로그 확인용으로 찍음

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8090");
        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);
        }

        return true;
    }
}

WebConfig

• 만든 인터셉터를 호출할 클래스 생성 후 호출한다.

package august.soil;

import august.soil.web.interceptor.CorsInterceptor;
import august.soil.web.interceptor.LogInterceptor;
import august.soil.web.interceptor.LoginCheckInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new CorsInterceptor())
                .order(1);
    }
}

• 그럼 끝!인데 프론트 개발자가 일이 있는지 아직 테스트를 해 보지 못해서 정확한 동작 유무는 모르겠다… 포스트맨으로 요청을 보냈을 때 인터셉터가 호출되는 로그는 확인되어서 동작이 되나보다 하고 일단은 대기 중인 상태…
  
  
  

정리

• 프론트와 백단으로 나누어 작업하는 것에 생각보다 신경쓸 것이 많다는 것을.. 깨달았다… 화이팅…!
  
  
  

참고

• 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술