React와 springBoot 연동 시키기

기본적으로 웹 페이지의 구동방식은 프론트에서 백으로 요청을 보내고 백에선 받은 요청을 처리한 뒤 반환값을 프론트로 보내는 방식으로 구동된다. 하지만 React에서 이 같은 방식으로 springBoot에 요청을 보내게 되면 브라우저의 Same-Origin Policy 때문에 정상적인 호출이 안된다.

 

동일 출처 정책(Same-Origin Policy)

웹에는 기본적으로 동일 출처 정책이라는 보안 정책이 적용되어 있는데 이 정책은 프로토콜, 도메인, 포트 번호가 동일한 출처에서 오는 자원에만 접근할 수 있도록 제한해 준다. 이 같은 제한이 필요한 이유는 예를 들어 A사이트에서 로그인하여 토큰을 발급받은 상태에서 B사이트에서 A사이트로 api 요청을 하면 A사이트에서 발급된 토큰이 자동으로 첨부되어 사용자인척 요청을 보낼 수 있기 때문에 출처가 다른 요청은 브라우저에서 자동으로 막아준다.

 

CORS

웹 애플리케이션은 점점 더 복잡해지면서 여러 사이트의 api와 데이터들을 가져와 사용하게 되는데 보안상의 이유로 브라우저에선 동일 출처 정책을 실행되었고 이러한 문제를 해결하기 위해 CORS가 도입되었다. Cross Origin Resource Sharing는 웹 페이지의 리소스가 다른 도메인에서 리소스에 접근할 수 있도록 허용하는 방법으로 브라우저의 Same-Origin Policy(동일 출처 정책) 때문에 다른 서버에서 이미지, 동영상, API 등의 리소스를 가져올 수 없는 문제를 해결하기 위해 사용한다.

 

React에서 middleware 설정

React 프로젝트를 설치한 폴더에서 cmd를 실행하고

npm install http-proxy-middleware --save

 

코드를 입력하면 http-proxy-middleware 라이브러리가 설치되고 src폴더에 setupProxy.js 파일이 생성된 것을 볼 수 있다.

 

setupProxy.js 파일에는 다음과 같이 코드를 작성한다.

// CORS 요류를 방지하기 위한 Proxy 설정
const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function(app){
    app.use(
        '/api',
        createProxyMiddleware({
            // springboot 서버 url 혹은 localhost:포트번호
            target: 'http://localhost:8080',
            changeOrigin: true,
        })
    );
};

 

'target'은 본인의 백엔드 서버 주소를 적으면 되며 백엔드로 요청을 보낼 땐 보내는 'http://localhost:8080/api/test' 이런 식으로 요청을 보내면된다.

 

springBoot에서 WebConfig 설정

src/main/java폴더 안에 config폴더를 추가하고 폴더 안에 WebMvcConfig 파일을 만들어준다.

package com.son.portfolio.config;

import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

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

 

이것과 같이 프론트엔드와 백엔드에서 CORS 설정을 해주면 React에서 axios 통신이 정상적으로 실행되는 것을 확인할 수 있다.