SpringBoot + React

Spring, Spring Boot 를 기준으로, 최근 웹 개발의 트렌드는 자체 탬플린 엔진을 사용하여 HTML페이지를 리턴하는 방식이 아닌, SpringBoot를 RestAPI 서버로 두고, React 또는 Vue를 이용하여 프론트를 구현하는것이 대부분이다.

CORS

Cross-Origin Resource Sharing

웹 브라우저에서 애플리케이션을 실행할 때, 해당 애플리케이션이 다른 출처(origin)에서 가져온 자원(예: 이미지, 스크립트, 스타일시트 등)을 요청하면, 보안 상의 이유로 기본적으로 해당 요청은 차단된다.

이것이 무슨말이냐면 리액트와, 스프링부트는 출처가 다르다.

• URL Schema (Ex. http, https)
• Hostname (Ex. localhost, google.com)
• Port (EX. 80, 8080)

이 중 하나라도 다르면 요청이 불가능하다. 리액트와 스프링부트를 처음 실행한다면

React - localhost:3000
SpringBoot - localhost:8080

으로 열린다. 이럴경우 포트번호가 다르기때문에 서로 통신이 불가능하다.
해결방법은 2가지가 있는데

• React에서 해결하기
• SpringBoot 에서 해결하기

다만 이중에 많이 사용하는 방법은 SpringBoot에서 해결하는 방법이기에 이 방법을 소개하겠다.

CORS 설정 - SpringBoot

SpringBoot Application 과 같은 위치에 WebMvcConfig.class 생성 후

public class WebMvcConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE");
    }
}

위와같이 코드를 입력해준다.

위 코드를 분석하면

• addMapping - CORS를 적용할 URL 패턴을 지정하는 메서드
• allowedOrigins - CORS 요청에서 허용되는 Origin(출처)을 지정하는 메서드
• allowedMethods - CORS 요청에서 허용되는 HTTP 메서드를 지정하는 메서드

위와같은 메서드를 사용하기 위해 WebMvcConfigurer 를 implements 해준다.

WebMvcConfigurer 란?

Spring MVC의 구성을 사용자 정의할 수 있는 인터페이스다.

여기에 포함된 addCorsMappings() 메서드를 사용하면 CORS (Cross-Origin Resource Sharing) 설정을 구성할 수 있다. 이 메서드를 사용하면 특정 URL 패턴에 대한 CORS 구성을 추가할 수 있으며, 각 패턴에 대해 허용되는 원본 및 HTTP 메서드를 지정할 수 있다.

React 에서 요청하기

const {functionName} = async () => {
    try {
      const response = await axios.get('http://localhost:8080/{api}')
      console.log(response.data);
    } catch (error) {
      throw error;
    }

fetch 혹은 axios 를 활용하여 요청을 보내면 응답을 받아오는것을 확인 가능하다.

• {functionName} - 함수 이름
• {api} - SpringBoot Controller Mapping => @GetMapping('/{api}')