spring boot - react proxy 이슈 해결 방법

설명 전) react 환경에서 npm start로만 진행할경우 충분히 packasge.json에서 "proxy" 추가해서 서버 경로를 연결하면 됩니다. 하지만 실서버 적용시 build 진행하는 경우에는 프론트에서 적용한 것보다는 서버에서 설정을 해야하기 때문에 서버측에 cors proxy를 별도 설정해주셔야 합니다. 프론트에만 수정한다고해서 build환경에는 cors 에러를 해결하실 수 없습니다.

 

먼저 spring boot 환경이 설정되었다는 조건하에 설명 진행하겠습니다. 

 

1. WebConfig.java 파일을 생성하고 CorsRegistry를 mapping 진행합니다. 

추가 설명) 

저는 서버 개발을 laravel, nodejs로 진행했기 때문에 spring boot는 proxy 이슈 해결을 위한 용도로 했기 때문에 java 개발을 주로 하시는 분들은 현재 파일 위치를 상황에 맞게 바꿔서 진행해주시면 됩니다.  

package com.example.demo;

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

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/hello")
                .allowedOrigins("http://localhost:3000"); // React 애플리케이션 호스트
    }
}

추가 설명) 

• registry.addMapping("/hello").allowedOrigins("http://localhost:3000")
  • front는 locahost:3000 즉 build하고 serve -s build하면 localhost경로는 3000이 나오게 됩니다. 만약에 Local: http://localhost:3001이 나오면 .allowedOrigins("http://localhost:3001")로 하시면 됩니다.
  • "/hello" 는 api 요청시 보내는 endpoint로 예를 들어서 서버 url이 localhost:8080일 때 localhost:8080/hello 요청하면 그 부분은 CorsRegistry를 적용한다는 의미입니다. 

2. 현재 cors 적용 controller에 WebConfig에 적용한 api endpoing 가지고 와서 적용합니다. 

package com.example.demo;

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

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot!";
    }
}

추가 설명) 

위에 코드는 HelloController.java 이고 카테고리 이미지에 보이면 그 HelloController.java에 적용한 코드입니다.

여기서 중요한 부분은 CorsRegistry에 적용한 것을 가지고 온 @GetMapping("/hello") 입니다. 

 

3. react에서 요청 api를 서버 url과 적용 endpoint에 맞춰서 놓고 다시 npm run build 이후 serve -s build를 진행하시면 됩니다. 

import React, { useEffect, useState } from 'react';
import axios from 'axios'; // Axios 라이브러리를 import 합니다.
import './App.css';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    axios.get('http://localhost:8080/hello')
      .then(response => {
        // response.data를 통해 서버 응답에 접근합니다.
        setMessage(response.data);
      })
      .catch(error => console.error("There was an error!", error));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <p>
          Message from Spring Boot: {message}
        </p>
      </header>
    </div>
  );
}

export default App;

추가 설명)

localhost:8080 - spring boot 실행시 기본적으로 tomcat은 8080 port로 실행합니다. 만약에 해당 port에서 실행이 안되신다면 src/main/resources/application.properties로 들어가셔서 확인하시면 됩니다.