[웹 2팀] 3. axios와 CORS를 이용한 react-spring boot 연동 방법

기존 react는 3000 포트, 스프링부트는 8080 포트를 이용한다. 이 방법은 react의 포트로 연동가능하도록 하는 방법이다.
이 방법은 connecting react with spring boot사이트를 참조하여서 작성되었다.

1. react 설정

1) 해당 프로젝트에 axios 설치

npm install axios --save  

--save/-S 옵션은 외부 모듈을 이용할 때 모듈을 추가한 프로젝트의 package.json에 의존성을 자동으로 추가해 준다.
현재는 이 옵션이 없어도 의존성이 자동으로 추가되어서 현재는 --save 옵션을 dependency에 어떻게 저장할 것인지를 지정하는 목적으로 사용한다.

package.json에서 위와 같이 axios 의존성이 추가되어 있으면 된다.

2) axios 파일 작성

service 폴더를 만든 뒤 service.js파일을 생성해 내용을 작성한다.

우선 axios 모듈을 추가한다.
그리고 const로 springboot에서 연결되는 웹페이지의 url을 지정하고, 클래스 내부에 url을 받아오는 함수를 작성한다.

import axios from 'axios';

const url명 = "사용할 spring boot의 url"

class 파일명 {
    get함수() {
        return axios.get(url명)
    }
}
export default new 클래스명()

ex) 
import axios from 'axios'

const EMPLOYEE_API_BASE_URL = "http://localhost:8080/api/v1/emotions";

class EmotionService {

  getEmotions(){
    return axios.get(EMPLOYEE_API_BASE_URL)
  }

}
export default new EmotionService()

2. Spring boot 설정

1) react와 연결할 controller에 CORS 조건 추가

Spring boot의 CrossOrigin 어노테이션을 이용할 것이다.
해당 리액트 서버와 연결할 controller에 CrossOrigin 어노테이션을 추가한다.

@CrossOrigin(origins = "http://localhost:3000") //해당 리액트 포트 번호.

리액트 포트 번호를 바꾸고 싶다면 package.json의 proxy 설정의 포트 번호를 바꿔주면 된다.

CORS개념에 대해 더 알아보고 싶다면 아래 링크를 참조하면 도움이 될 것이다.
CORS 설정 방법
CORS 종류 간단한 설명 및 simple test site

이 방법 외에 다양한 방법이 궁금하다면 아래 링크를 참조하면 된다.
https://joshua-dev-story.blogspot.com/2020/01/react-spring.html

출처

https://docs.npmjs.com/cli/v6/commands/npm-install/
https://xtring-dev.tistory.com/11