삽질 기록 (1) 스프링 부트와 리액트 CORS 해결하기

 

 

 

 

뭘 만들지 5일이나 고민했는데

생각해보니 어차피 만들 줄 아는 것도 없고 공부하려면 시간도 딱히 없넹

 

그래서 일단 아무렇게나 두들겨보며 익히겠다는 생각으로 계획 없이 프로젝트를 생성했다.

 

 

 

 

하나도 기억 안 난다. 망했군.

여차저차 기억 대신 손에 맡겨가며 연결했는데

 

 

 

 

오랜만에 CORS를 만났다.

CORS에 대해 잠깐 설명하자면 Cross-Origin Resource Sharing으로 서버와 브라우저의 오리진이 다른 것을 검증한다는 뜻이다.

많은 프론트엔드 독학러들을 뒷목 잡게하는 녀석이지만 사실 우리를 보호해주기 위해서 브라우저에서 열심히 일하고 있는 것으로써, 요청은 내가 했는데 받는 건 다른 녀석이 받거나 나는 가만히 있었는데 다른 놈이 요청해서 정보를 탈취하는 걸 막아주고 있는 것이니 너무 미워하지 말자.

* Origin(출처) = 도메인, 포트, 프로토콜

 

이런 정책을 동일 출처 정책(Single Origin Policy)라고 한다. 예를 들어 API 요청을 naver.com:8080에서 했으면 받아가는 것도 naver.com:8080에서 받아가라는 것이다.

이제 위의 메세지를 다시 읽어보면 무슨 뜻인지 이해가 된다.

 

" 너 API 요청은 8080포트에서 날리고 있는데 브라우저는 3001이네? 차단 "

 

문제는 오랜만에 했더니 어떻게 해결하는지 몰라서 뒷목 잡았다.

그래도 구글이 다 알려주니까 걱정 말아라.

 

 

 

 

import "./App.css";
import React, { useState, useEffect } from "react";
import { testAxios } from "./config/testAxios";
 
function App() {
  // IP
  const [ip, setIp] = useState("");
  const findIp = (data) => {
    setIp(data);
  };
 
  useEffect(() => {
    testAxios("test", findIp);
  }, []);
 
  return <div className="App">{ip}에 연결 성공!</div>;
}
 
export default App;
 

import axios from "axios";
 
export const testAxios = (url, findIp) => {
  axios({
    url: "/" + url,
    method: "post",
    baseURL: "http://localhost:8080",
    withCredentials: true,
  }).then((res) => {
    findIp(res.data);
  });
};
 

 

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("/**")
                .allowCredentials(true)
                .allowedOrigins("http://localhost:3000");
    }
}
 

 

간단 설명

WebMvcConfigurer을 상속받아서 addCorsMappings 메서드를 구현해야 한다.

addMapping("/**") -> 모든 요청 허용

allowCrentials(true) -> 쿠키 보냄

allowedOrigins("~~") -> 해당 Origns에 교차 출처 허용

 

 

 

 

편 - 안

 

 

 

더 찾아보니 역시 우리의 스프링답게 그냥 컨트롤러 위에 @CrossOrigin 붙이는 방법도 있다.

@CrossOrigin(origins = "허용할 포트", allowedHeaders ="*")이렇게 설정하면 되는데, 모든 컨트롤러에 따로 작성해줘야 한다.

사실 개인 프로젝트에 컨트롤러가 많아봐야 거기서 거기라 크게 불편하지는 않을 것 같다.

 

끝.