React - Node.js & React - Spring CORS 해결방법(2)

다음으로 React - Spring 간 서버통신 시 CORS 정책을 해결할 수 있는 방법에 대해 알아보겠습니다.

2. Spring

(1) Controller

Spring은 요청이 들어오면 Controller - Service - DB 순으로 정보를 전달하게 되고 해당 순서상 가장 먼저 요청을 받는 곳이 Controller이기 때문에 CORS정책을 해결하는 방법은 Controller에 적용해야합니다.

@Controller
@CrossOrigin("*")
public class Controller {
    @GetMapping("/login")
    public String login() {
      	return null;
    }
}

@Controller 어노테이션을 이용해 Controller인 class에 @CrossOrigin("*")이라는 어노테이션만 붙이면 모든 포트에서 들어오는 요청을 허용하게 되고 이로써 CORS정책을 해결할 수 있습니다. 만약 특정 포트의 접근만 허용하고 싶다면 와일드카드(*) 부분에 해당 localhost:port번호 를 직접 나열해서 사용하시면 됩니다.

 

(2) React

import React, { useState, useEffect } from 'react';
import axios from "axios"; // axios를 이용해 server와 통신합니다.

//backend의 데이터 불러오기
var url = "http://localhost:3002/api";
useEffect(() => {
axios.post(url, null, {
              params: {
                    id: `${params[0]}`
                }
            })
     .then((response) => {
     setUser(user => ({
                    ...user,
                    userid: response.data.userid,
                    userclass: response.data.userclass,
                    joindate: response.data.joindate,
                    email: response.data.email,
                    cellPhone: response.data.cellphone
                }));
      }
  });
}, []);

프론트앤드 쪽 React 코드는 제가 했던 프로젝트에서 일부 발췌한거라 실제로 적용하실 때에는 response.data의 속성이나 useState의 set부분이 다를 수 있으므로 각 상황에 맞게 수정하시면 됩니다. Node.js와의 연동 시와 다른 점은 axios.defaults.withCredentials = true; 이 부분이 필요없다는 점만 다를 뿐 나머지는 동일합니다. 특히 이번 코드의 경우 params 라는 JSON 객체를 데이터로 전달하고 받아온 데이터를 response에 저장하여 사용하고 있는데 만약 Spring이나 Node.js와 같은 백앤드와 서버통신 시 특정 데이터를 보내야 된다면 위와 같이 JSON객체에 저장하여 보내시면 됩니다.

 

지금까지 서버통신 간 발생할 수 있는 CORS 정책을 해결할 수 있는 방법에 대해 알아보았습니다.