[Spring] Spring, React 연동하기(CORS,Proxy)

Spring에서는 Thymeleaf, JSP등을 사용하여 동적 WebPage을 만들 수 있다. 하지만 때에 따라서는 Front는 React으로 구성하고 BackEnd를 Spring을 사용하여 구성할 때가 있다. 하지만 React에서 Thymeleaf, JSP등의  Spring의 템플릿 엔진은 사용을 하지 못하고 React와 Spring은 서로 다른 구조를 가지고 있기 완전히 하나의 서버로 작동하지 못한다.

 

---

그렇다면 Spring과 React를 연동하기 위해서는 역할을 구분해야한다. Spring에서는 RestApi등을 사용하여 순수 데이터만 제공하고 React에서 Axios등을 써서 해당 Api를 호출하는 방식으로 해야한다. 하지만 기본적으로 Spring에서는 Cross-Origin요청을 제한하기 때문에 CORS설정을 할 필요가 있다.

---

CORS(Cross Origin Resource Sharing)

웹 어플리케이션에서 이미지 파일이나 폰트,cs, JS 파일같은 resource를 다른 출처에서 읽어온다. 만약 웹 어플리케이션에서 자신이 속하지 않ㄴ은 다른 도메인,프로토콜,포트에 있는 resource를 요청하면 웹 어플리케이션은 cross-origin Http요청을 실행한다. 이때 브라우저는 보안상의 이유로 스크립트 안에서 시작하는 cross-origin Http 요청을 제한한다.(img테그나 몇몇 script의 src요청은 예외) 하지만 웹 개발에 있어서 다른 Origin으로의 요청이 필요한 상황이 만들어졌다. 때문에 cross-origin 요청이 가능하도록 CORS라는것이 만들어졌다.

 

---

Spring에서 CORS 설정하기

spring에서 Cors를 허용하기 위한 방법으로는 2가지 방법이 있다.

1. Configuration 사용하기

@Configuration
public class WebConfig implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**") // cors를 적용할 spring서버의 url 패턴.
                .allowedOrigins("http://react-domain.com") // cors를 허용할 도메인. 제한을 모두 해제하려면 "**"
                .allowedMethods("GET","POST","PUT") // cors를 허용할 method
    }
}

 

2. Annotation 사용하기

@Controller
@CrossOrigin(origins="*")
public class CustomController{
    @GetMapping
    .....
}

 

origin을 설정할때는 React서버의 공인 IP나 도메인 주소를 적어야 제대로 작동한다.

하나의 컴퓨터에서 작동한다고 localhost를 사용하면 같은 컴퓨터의 브라우저에서만 제대로 작동한다. 즉 도메인이나 공인 IP로 접속한 외부에서는 사용이 불가능하다.

---

위처럼 CORS설정을 해주면 Spring에서의 설정은 끝이다.

React에서 해줄일은 간단하다 프로젝트폴더에 있는 package.json에다가 Proxy설정만 해주면 된다.

{
....
"proxy": "{spring 서버 Url}",
....
}

한줄만 추가하면 된다.

만약 같은 PC에서 돌리고 있다면 "http://localhost:{서버포트}" 으로 해도 무방하다.

 

axios를 사용할때 로컬에 사용하듯이 url을 호출해도 proxy설정으로 인해 spring서버에 요청하게 된다. 

import axios from 'axios';

...
axios.get('/data/somthing')
     .then((response)=>{console.log(response.data)});
     ...