React에서 Spring Boot REST API 연동 및 CORS 설정 실습 가이드

React에서 Spring Boot REST API 호출 & CORS 설정 실습

React 프론트엔드에서 Spring Boot 백엔드의 REST API를 호출하고, CORS(Cross-Origin Resource Sharing) 문제를 해결하는 방법을 단계별로 안내합니다.

• 1) React 컴포넌트에서 API 호출 코드 작성
  src/App.js 또는 원하는 컴포넌트에 아래 코드를 추가하세요.

  import React, { useEffect, useState } from 'react';
  
  function App() {
    const [message, setMessage] = useState('');
  
    useEffect(() => {
      fetch('http://localhost:8080/api/hello')
        .then(res => res.text())
        .then(data => setMessage(data))
        .catch(err => setMessage('API 호출 실패: ' + err));
    }, []);
  
    return (
      <div>
        <h2>Spring Boot API Test</h2>
        <p>{message}</p>
      </div>
    );
  }
  
  export default App;
  

  • 개발 서버 실행: npm start
  • 브라우저에서 http://localhost:3000 접속
  • Spring Boot에서 반환한 메시지가 화면에 표시되는지 확인
• 2) CORS(Cross-Origin Resource Sharing) 설정 (Spring Boot)
  React에서 API 호출 시 CORS 오류가 발생하면 아래 방법으로 해결하세요.
  • 컨트롤러에 어노테이션 추가
    HelloController.java 또는 모든 API 컨트롤러에 아래 어노테이션을 추가합니다.

    @CrossOrigin(origins = "http://localhost:3000")

    @RestController
    @RequestMapping("/api")
    @CrossOrigin(origins = "http://localhost:3000")
    public class HelloController {
        @GetMapping("/hello")
        public String hello() {
            return "Hello, React!";
        }
    }

  • 글로벌 CORS 설정 (여러 컨트롤러에 적용하려면)
    src/main/java/패키지명/config/WebConfig.java 파일을 생성하고 아래 코드를 추가합니다.

    package com.example.demo.config; // 패키지명에 맞게 수정
    
    import org.springframework.context.annotation.Bean;
    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 WebConfig {
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/api/**")
                            .allowedOrigins("http://localhost:3000")
                            .allowedMethods("GET", "POST", "PUT", "DELETE");
                }
            };
        }
    }
    

실습 TIP: 먼저 React에서 API 호출을 시도해보고, CORS 오류가 발생하면 위 설정을 적용하세요.
정상적으로 메시지가 표시되면 연동 성공입니다!