[Spring, React, Vite] 스프링과 리액트 연결하기_ React에서 CORS 해결하는 방법과 Spring에서 CORS 해결하는 방법, Security 해결 방법

 

 

 

스프링과 리액트를 서로 연결할 것이다.
검색을 하면 React에서 연결하는 방법이 많이 나온다.
그러나! 나는 Spring에서 연결하는 방법도 궁금하다.
그래서 둘 다 알아볼 것이다.

 

 

 

 

 

1. 환경

• 프론트엔드 → React + Vite 
  React랑 Spring 연결하는 방법을 검색하면 보통 CRA 방식이 많이 뜬다. CRA는 Create React App으로 여러 도구를 하나의 권장 설정으로 통합하여 기존에 갖고 있던 React의 문제점을 해결하고 있었다. 그런데 리액트에서 사용을 중단했다. 그렇다고 안되는 것 같진 않은데, 고성능 프로덕션 앱 구축을 어렵게 하는 몇가지 제한이 있어서 CRA 사용을 중단하고 기존 앱은 프레임워크나 Vite, Parcel, RSBuild 같은 빌드 도구로의 마이그레이션을 권장한다고 리액트 측에서 적어뒀다. 거기다 나는 Vue를 Vite로 해서 React도 Vite로 설정했다. 이때 자신이 설정한 빌드 도구를 잘 알아야 한다. 프론트에서 CORS 설정을 할 때, 어떤 빌드 도구인지에 따라 설정 방식이 조금씩 달라진다. Vite로 빌드 도구를 설정하지 않았으면, 본인의 빌드 도구에 맞게 설명이 적혀있는 블로그를 찾는 걸 추천한다.

 

- Create React App 지원 종료

Create React App 지원 종료 – React

 

 

• 백엔드 → spring
  백엔드는 spring으로 쓸 것이다. 혹시 몰라서 프로젝트에 대해 설명을 해보겠다. DB 관련된 프로젝트를 해본 적이 없어서 DB를 관리하는 작은 프로젝트를 만들 예정이다. 브랜드를 운영한다는 가정하에, VIP 이상인 등급을 가진 고객님들 한정으로 연말 초대 코드를 보낸다. 그리고 그 VIP 등급 이상인 고객님들을 관리하는 페이지를 만드는 것이다. 프론트엔드에서 관리자가 고객을 추가하면 스프링에서 받아 처리하고 저장할 수 있도록 한다. 그래서 리액트와 스프링을 연결해야한다. 
  
  

 

 

---

 

 

 

 

2. 동작 화면

• 프론트엔드에서 저장을 누르면 백엔드에서 저장을 처리하고 프론트에 적었던 정보가 나타난다. 여기서 저장을 백엔드에서 처리하고자 프론트엔드와 백에드를 서로 연결해야하는 상황이다.

 

 

 

 

---

 

 

 

 

3. React에서 CORS 설정하기

• 프록시 설정 추가하기
  프로젝트 루트에 vite.config.js를 만든다. 루트에 만들어야 인식가능하다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            "/api": {
                target: "http://localhost:8080",
                changeOrigin: true,
                // SSL 인증서 무시하여 개발 환경에 유용하다.
                secure: false,
                // 상황에 따라 추가한다.
                rewrite: (path) => path.replace(/^\/api/, "")
            },
        },
    },
});

여기서 rewrite는 spring에서 어떻게 받는지에 따라 달라진다. rewrite: (path) => path.replace(/^\/api/, "")는 프록시가 요청 경로를 백엔드로 보내기 전에 살짝 바꿔주는 역할을 한다. 프론트에서 fetch("/api/customers");로 백엔드에 경로를 보낼 것이다. 그러면 프록시가 가로쳐서 경로를 수정하여 http://localhost:8080/customers로 백엔드에 실제 요청이 된다. 이걸 써야하는 경우는 @RequestMapping("/customers")로 Spring에 설정해뒀을 경우이다. 만약 @RequestMapping("/api/customers")라고 설정했다면 굳이 rewrite를 적어줄 필요는 없다.

 

 

• fetch 
  코드를 보기 전에 먼저 아래에 있는 fetch와 await 대한 설명이 적힌 링크에 들어가 보면 좋을 것 같다. 

const response = await fetch("/api/customers", {
                method: "POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(form),
            });

전체 코드를 올리진 않고 fetch 코드만 올리겠다. 대충 이런 흐름이구나 정도로 참고해주면 좋겠다. 문제가 생겼는데 어디서 문제가 생겼는지 이 코드에 문제가 있는건지 아직 정확하지가 않다. 문제를 찾아 고친 후 다음 포스팅에 해당 기능에 대한 코드를 더 자세하게 올리겠다.

fetch는 응답이 사용 가능해지면 이행하는 promise를 반환한다. await는 promise가 이행 또는 거부 처리될 때까지 async 함수의 실행이 일시 중단된다. 여기서 promise는 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있도록 하는데, 다만 최종 결과를 반환하는 것은 아니고 미래의 어떤 시점에 결과를 제공하겠다는 프로미스를 반환한다. 개념을 따로따로 살펴보니 종합적으로 이해가 잘 가지 않는다. 코드를 보면서 최대한 이해해보자! (사실 제대로 이해한건지 잘 모르겠당)

우리의 목표는 백엔드로 요청을 보내고, 백엔드에서 어떤 처리 이후 결과를 반환받아야 한다. 그래서 "/api/customers" 경로로 헤더와 바디를 POST 방식으로 보냈다. 그러면 그 결과를 받는 시간이 걸린다. 왜냐면 네트워크,비동기 작업이기 때문에 시간이 걸린다. 아마 이 다음 코드는 반환 받은 결과를 이용한 코드일 것이다. 아직 결과는 오지 않았는데 다음 코드로 넘어가게 된다면? 분명 문제가 발생할 것이다. 그래서 fetch로 promise 반환을 받는 것이다.(fetch가 promise로 받아야겠다고 해서 받는게 아니라 자바스크립트가 promise로 돌려주는 것 같다.) promise는 세가지 상태가 있다. 대기-이행(성공)-거부(실패)가 있다. await는 promise가 대기에서 이행 혹은 거부라는 결과가 나올 때까지 기다리도록 한다.

다시 정리해보자. 결과가 오기까지 시간이 걸린다. 그래서 await로 다음 결과로 넘어가지 않도록 한다. 그리고 네트워크, 비동기 작업은 자바스크립트에서 promise로 반환한다. 그래서 promise를 반환하는 fetch를 썼다.

여기서 중요한 것은 기다리게 한다고 해서 프로그램 자체가 멈춰있는 것은 아니다. 사실 현재 이 코드는 async가 붙은 함수 안에 들어있는데, await가 들어있는 async 함수만 멈춘거지 다른 부분은 돌아간다. 이 말이 이해가 잘 안 갈 수 있다. 가정을 해보자. 네모가 있고 세모가 있으며, 일정 시간마다 둘 다 색상이 변경된다고 가정하자. 이때 네모는 async가 쓰이며 함수 안에 await sleep(1000);이란 코드를 포함하고 있다. 그러면 네모는 일정한 시간을 멈춘 뒤 색상이 변경될 것이다. 세모는 네모가 멈춰있는 동안에도 색상이 변경될 것이다.

 

 

 

- Fetch API

Fetch API 사용하기 - Web API | MDN

 

 

- fetch

fetch() 전역 함수 - Web API | MDN

 

 

- await

await - JavaScript | MDN

 

 

 

• 실제 배포
  개발만 할 때는 이정도만 해도 충분히 동작이 된다. 그러나 배포할 때는 꼭 spring에 CORS를 적용해야한다.
  
  

- Spring CORS 설정

vite-react 와 스프링 부트 연동하기

 

 

 

 

---

 

 

 

 

4. Spring에서 CORS 설정하기

• vite.config.js
  프로젝트 루트에 vite.config.js를 만든다. 루트에 만들어야 인식가능하다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

 

리액트에서 CORS 설정을 했을 때는 프록시를 추가했다. 그런데 spring에서 CORS를 설정할 경우 프록시가 필요없기 때문에 위처럼 간단하게 적어준다. 만약에 프론트엔드와 백엔드에서 CORS를 모두 허용하게 하고 싶다면, 프록시를 포함한 코드를 작성하면 된다. 프록시 포함 코드는 위에 적었다.

 

 

• fetch 

const response = await fetch("http://localhost:8080/api/customers", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(form),
});

이 코드에 대한 설명은 위에 프론트에서 CORS 설정하는 방법에 적어뒀다. 두 코드에 차이가 있다면 경로인데, 프록시가 없으니 직접 백엔드로 요청을 보내기 위해 "http://localhost:8080/api/customers"으로 적어줬다.

 

 

• 방법 1_ @CrossOrigin을 붙인다.
  가장 간단한 방법으로 상황에 따라 쓰면 됩니다.

@RestController
@RequestMapping("/api/customers")
@CrossOrigin(origins = "http://localhost:5173", //허용할 주소
 methods = {RequestMethod.POST}, //POST 방식 허용
 allowedHeaders("*")) //모든 헤더 허용
public class CustomerController {
...
}

@CrossOrigin은 CORS를 설정하는 방법 중 하나이다. 컨트롤러 혹은 메서드마다 설정하고 싶다면 간단하게 @CrossOrigin을 붙이면 된다. 정밀하게 적용 가능하다는 장점이 있으나, 프로젝트가 커져서 @CrossOrigin을 적을 컨트롤러가 많아진다면 반복적인 코드를 붙여야 한다는 단점이 있다.

 

 

• 방법2_ WebMvcConfigurer
  전역으로 CORS를 설정하는 방법이다.
  

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") //CORS 정책을 적용할 URL 경로 패턴
                .allowedOrigins("http://localhost:5173") //요청을 허용할 주소
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") //허용할 HTTP 메서드
                .allowedHeaders("*") //모든 헤더 허용
                .allowCredentials(true); // 인증된 요청을 허용 (예: 쿠키, HTTP 인증)
    }
}

WebMvcConfigurer는 SpringMVC의 기본 설정을 변경하거나 추가할 수 있게 도와주는 인터페이스이다. 스프링 부트가 애플리케이션을 시작할 때, MVC 설정을 구상하면서 자동으로 addCorsMappings를 호출한다. 그래서 addCorsMappings 안에 CORS를 수정하여 registry에 등록하면 된다.

addMapping으로 경로를 등록하고 체인을 통해 다른 설정도 수정하면 CoreRegistry가 그걸 가지고 있는다. 그렇게 "/api/**" 경로는 이런 규칙을 가지도록 적용한다.

이렇게 전역으로 관리하면 좋은 점은 유지보수가 쉽다는 것이다. 그러나 Spring Security를 쓰면 이 설정 방식이 제대로 동작하지 않을 가능성이 있다.(전에 그랬어서 엄청 애먹었다!)  그 이유는 Sercurity를 쓰면 요청이 Security 필터에 막히게 되어 CORS 요청이 제대로 전달되지 않는다. 

 

 

• SecurityConfig  설정하기
  Security를 포함시켜서 프로젝트를 만든 경우 아래와 같이 작성해줘야한다. 

@Configuration
// Spring Security를 활성화한다. 스프링 3.X부터는 생략가능한듯?
@EnableWebSecurity
public class SecurityConfig {
    // HttpSecurity를 받아 인증/인가, CORS, CSRF 등 웹 보안 정책을 코드로 설정한다.
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .csrf(csrf -> csrf.disable())
                // 오류 발생으로 개발단계에서 전체 허용, 추후 조정 가능
                .authorizeHttpRequests(authz -> authz
                        .requestMatchers("/api/register").permitAll()//해당 경로는 누구나 접근 가능하도록
                        .requestMatchers("/api/login").permitAll()
                        .requestMatchers("/h2-console/**").permitAll()//DB도 접근 가능하도록
                        .requestMatchers("/oauth/kakao").permitAll()
                        .anyRequest().permitAll() // 모든 요청 인증 없이 허용
                )
                .headers(headers
                        -> headers.frameOptions(frameOptions -> frameOptions.disable()))
                .cors(cors -> {}); //다른 출처에서 API를 호출하도록 한다.
        return http.build(); //위의 설정값을 토대로 SecurityFilterChain 객체를 생성해서 빈으로 등록한다.
    }

    // 비밀번호 암호화(해시처리인듯) 시키기.
    // @AutoWired로 바로 쓸 수 있음
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

이건 전에 있던 프로젝트에서 작성한 SercurityConfig이다. 평소에 공부한 걸 주석으로 달아둔다. 나중에 프로젝트 훑어볼 때 쉬울 것 같아서 그렇게 놔뒀는데 그러길 잘한 것 같다. 전에 만들었던 프로젝트는 회원가입-로그인(카카오로그인포함) 기능을 만든 프로젝트였다. 그때 비밀번호 때문에 passwordEncoder를 쓴 것 같다. 이 부분은 필요에 따라 설정하면 될 것 같다.

현재 프로젝트에는 Security를 포함시키지 않았다. 기억에 의하면 나중에 keyclock을 시도해보려고 혹시 몰라서 안넣어둔 것 같다. 그래서 이 코드로 일단 올리겠다.

 

 

 

- WebMvcConfigurer-

[Spring Boot] WebMvcConfigurer 이해하기

 

 

- CORS 설정

Spring Boot CORS 설정하기