3) 스프링 부트 서버와 리액트간 연결(vite, CORS 처리)

 

 

리액트와 스프링 부트간 통신을 해야한다. 아래와 같이 아주 간단한 소스를 활용하여 테스트를 하면..

  const [apiTest, setApiTest] = useState('')

  const btnOnClick = () => {
    api.get("/api/hello")
       .then((response) => setApiTest(response.data));
  }
  
  return (
    <>
      <p>서버에서 받은 데이터 : {apiTest}</p>
      <button onClick={btnOnClick}>API 테스트</button>
    </>
  )

@RestController
@RequestMapping("/api")
public class SampleController {

	@GetMapping("/hello")
	public String helloReact() {
		return "Hello React !!!";
	}
}

 

예전에 JSP시절 보지 못했던 이런 오류를 본 적이 있을 것이다. CORS는 나중에 자세히 공부하기로 하고

 

포트가 다르므로 CORS 처리를 반드시 해 주어야 한다.

필자는 vite로 react 앱을 생성하였기 때문에 vite 설정파일인 vite.config.ts 파일에 먼저 설정을 진행하였다.

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy : {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        secure: false, // SSL 인증서 무시 (개발 환경에서 유용)
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

자세한 설정 정보는 vite 공식 홈페이지에 가면 상세히 나와있다. target 같은 경우 실제 업무에서는 저렇게 하지 않고 환경변수에다가 넣어뒀다가 환경에 맞게 사용한다. 이 부분은 나중에 다시 하도록 하겠음

위와 같이 설정 후 다시 실행시켜 보면 여전히 에러가 발생하고 있음을 알 수 있다.

그런데 에러 내용이 CORS가 아닌 404에러로 변경되어있다. vite 설정에서 전달받은 path에서 /api 에 해당하는 것은 공백으로 replace 하고 있기 때문에, 이럴 땐 당황하지 않고 백엔드 서버에 요청 URL이 존재하는지 확인해야 한다. 따라서 백엔드 서버의 샘플의 주소를 변경하도록 한다.

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class SampleController {

	@GetMapping("/hello")
	public String helloReact() {
		return "Hello React !!!";
	}
}

위와 같이 변경 후 테스트를 진행하면 아래와 같이 성공 할 것이다.

 

그런데 한가지 이상한 점이 있다. 리액트에서만 프록시 설정해서 CORS 문제를 해결했는데 과연 백엔드 서버에서도 해야 될까? 라는 의문이 들었다. 자세한 내용을 찾아보니 개발환경에서는 프록시를 사용하므로 스프링 CORS 설정이 필요하지 않다고 한다. 그런데 배포를 했을 경우에는 Spring 서버와 직접 통신하므로 CORS 설정이 스프링서버에서도 반드시 필요하다. 필자는 임시로 아래와 같이 진행 해 두었다. (추후 환경에 따라 변경 예정)

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

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 경로에 대해 CORS 허용
                .allowedOrigins("http://localhost:5173") // React 개발 서버의 URL
                .allowedMethods("*") // 모든 HTTP 메서드 허용
                .allowedHeaders("*") // 모든 헤더 허용
                .allowCredentials(true); // 인증 정보 허용
    }
}