[React] React + SpringBoot axios 통신간 발생한 cors 에러 해결방법

React SpringBoot Axios 통신 간 Cors 에러 해결하기

전체 그림 및 개요

통신 아키텍쳐

cors 에러 발생 시 axios 통신이 어려움

cors를 해결하고 save와 load로 TODOList 완성하기

 

cors 해결 방안

1. FE 에서 미들웨어 프록시 설정하기

2. BE 에서 WebConfig 설정하기

FE 에서 미들웨어 프록시 설정

 

처음 마주친 에러

터미널창에 아래와 같은 명령어를 입력하여 설치를한다.

npm install --save-dev http-proxy-middleware

setupProxy.js 로 꼭 만들기

setupProxy.js 파일을 만들어서 아래와 같은 소스코드를 입력한다 ( 해당 네이밍으로 만들기 )

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){
    app.use(
        "/api",
      createProxyMiddleware( {
        target: 'http://localhost:8082',
        changeOrigin: true
      })
    )
    
  };

"/api" 는 엔드포인트를 입력하고

target 은 BE 주소 포트까지만 적용

 

localhost에서 실행한 React 프로젝트를 예시로 설명하면, '/api' path의 경우엔 브라우저에서 'localhost:3000/api' 으로 요청을 보낸 것으로 보이지만 실제로는 설정된 proxy에 의해서 target에 명시된 URL로 요청이 이루어지게 됩니다. 이렇게 proxy를 사용하면 CORS 문제를 해결하고 외부의 다른 출처에 요청을 보낼 수 있습니다.

추가로 TypeScript CRA를 이용한 프로젝트에서 http-proxy-middleware를 사용하여 proxy를 설정할 때는 setupProxy.ts가 아닌 setupProxy.js로 작성해야합니다

 

BE 에서 WebConfig 설정하기

 

Spring Boot Config 파일 추가

WebMvcConfig 파일을 만들어 해당 요청에 대한 승인처리를 진행

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

다음과 같이 적용해주도록 한다.

 

메소드를 통해서 서버로 오는 요청에 대한 처리가 가능해진다.

addMapping	프로그램에서 제공하는 CORS 를 허용해줄 도메인, 해당 코드에서는 모든 URL 허용
allowedOrigins	요청을 허용할 도메인, 해당 코드에서는 프론트 도메인 URL
allowedHeaders	요청을 허용할 헤더
allowedMethods	허용할 HTTP 메서드
allowCredentials	쿠키 요청을 허용
maxAge	preflight 요청에 대한 응답을 브라우저에서 캐싱하는 시간

결과

적용 동시에 axios 통신이 가능해진 것을 확인 할 수 있다..