CORS - Spring Boot / React 간 통신을 위한 에러 해결

 

Spring boot 와 React 프로젝트를 처음 생성하고 간단하게 동작 확인을 하려고

서버에서 RestController 와 React 에서 axios 로 부르려고 시도를 했는데, 다음과 같은 오류가 발생했습니다.

 

React 코드는 다음과 같습니다.

import './App.css';
import { useState, useEffect} from 'react';
import axios from 'axios';

function App() {
  const url = 'http://localhost:8080/';
  const [data, setData] = useState('');

  useEffect(() => {
    (async () => {
      try {
        const { data } = await axios.get(url);
        setData(data);
      } catch (error) {
        alert(error);
      }
    })();
  }, []);

  return (
    <div className="App">
      { data }
    </div>
  );
}

export default App;

 

Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

 

CORS 에러 해결을 위해 서버, 프론트에서 각각 해결 할 수 있는 방법이 있지만 나는 서버에서 해결을 하기로 했습니다.

 

package com.junam.my_bucket_server.config;

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

@RequiredArgsConstructor
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

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

뜻은 모든 url 에 대해서 http://localhost:3000 에 다음과 같은 Method 를 가진 요청이 오면 권한을 주겠다는 말 입니다.

설정 후 서버 재시작을 해보니 정상적으로 요청이 들어왔습니다!