[React] React에서 Axios로 세션받기

문제점

클라이언트(React)와 서버(SpringBoot)를 RestAPI를 통해 통신(axios 사용)하고 있었다.
SpringBoot에서 cors 설정을 하고, React에서도 proxy 설정을 했는데도 세션값이 넘어오지 않았다.

// 스프링부트에서 Cors 설정 파일
@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:포트") // 클라이언트 url
                .allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE");
    }
}

컨트롤러에서 HttpSession 객체를 사용하여 로그인 시 세션을 저장해주었다.

	@RestController
    ....
    HttpSession session = request.getSession();
    session.setAttribute("sid",result);

또한, 리액트에서도 package.json파일에서 아래와 같이 proxy를 설정해주었다.

{
  "proxy": "http://localhost:포트/" // 서버 url
}

이렇게 하니 세션은 넘어오지 않지만 cors 이슈없이 정상적으로 서버와 클라이언트가 통신했다.
세션이 클라이언트 브라우저에 저장되지 않아 쿠키를 보내봤음에도 브라우저까지 오지 않았다.

해결

리액트에서 Axios라이브러리를 통해 비동기통신을 하고 있었는데 url에 도메인까지 지정한 것이 문제였다.

	await axios({
    	url : "http://localhost:포트/api/v1/user/login",
      	data : data,
        method : "post"
    })

이렇게 도메인(http://localhost:포트)까지 모두 적을 경우 서버와 통신은 되나, 세션과 쿠키가 넘어오지 않는 것이었다.

	await axios({
    	url : "/api/v1/user/login",
      	data : data,
        method : "post"
    })

이런 식으로 엔드포인트만 지정하여 통신하니 세션과 쿠기가 넘어온다.
이유를 찾아봤으나 그럴듯한 이유는 나오지 않는다. 아마 package.json에 지정한 proxy의 도메인이 cors를 해결 해주기 때문에 정상적인 통신을 위해서는 도메인 뒤부터 지정해야 하나보다.

혹시 진짜 이유를 알게된다면 글을 수정하겠다.