티스토리 뷰

1. 리액트와 스프링부트 간의 CORS 설정 (WebConfig.java)

역할: CORS 설정을 통해 특정 도메인에서 백엔드에 대한 요청을 허용

이유: React 개발 서버에서 Spring Boot 백엔드 서버로 요청을 보낼 때, 브라우저의 동일 출처 정책(Same-Origin Policy) 때문에 CORS 에러가 발생합니다. 이를 해결하기 위해 Spring Boot에서 CORS 설정을 통해 React 개발 서버의 도메인(http://localhost:3000)을 허용하도록 설정합니다.

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 implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

2. React 개발 서버와 백엔드 서버 간의 프록시 설정 (setupProxy.js)

역할: 개발 환경에서 API 요청을 프록시 서버를 통해 백엔트로 전달

이유: 서로 다른 포트를 사용하는 React 개발 서버와 Spring Boot 백엔드 간의 CORS 문제를 개발 환경에서 우회하기 위해 사용합니다. 이렇게 하면 React 개발 서버가 백엔드 API 요청을 중계하여 실제로는 다른 출처에서 발생하는 요청을 동일 출처에서 발생한 것처럼 처리하게 되므로, CORS 문제를 해결할 수 있습니다.

 

TypeScript CRA 프로젝트에서 http-proxy-middleware를 사용하여 프록시를 설정할 때는 setupProxy.js 파일을 사용해야 합니다. TypeScript는 이 파일을 인식하지 않으므로 .ts 파일로 작성할 수 없습니다.

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

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

3. 백엔드와의 API 통신을 위한 Axios 사용

역할: React에서 백엔드 API와 통신하기 위해 사용

이유: HTTP 요청을 보내기 위한 간단하고 강력한 라이브러리입니다. axios를 사용하면 GET, POST, PUT, DELETE 등의 HTTP 요청을 쉽게 보낼 수 있습니다. React 애플리케이션에서 백엔드와의 통신을 처리하기 위해 필요합니다.

npm install axios

4. 정리

  • WebConfig: Spring Boot에서 CORS 정책을 설정하여 React 애플리케이션의 도메인에서 오는 요청을 허용.
  • setupProxy.js: React 개발 서버에서 백엔드로의 API 요청을 프록시 처리하여 CORS 문제를 해결.
  • axios: React 애플리케이션에서 HTTP 요청을 보내기 위한 라이브러리.

5. 추가적인 내용

Spring Boot 백엔드 서버에 WebConfig 설정이 되어 있다면 setupProxy.js는 필요하지 않습니다. WebConfig에서 CORS를 설정하지 않고 setupProxy.js만 사용하면 CORS 문제가 여전히 발생할 수 있습니다.

 

끝.

728x90

'React' 카테고리의 다른 글

[React] Main Concept  (0) 2024.06.14
[React] IntelliJ Create React Project  (0) 2023.09.22
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/06   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함