React Session 저장문제

 

문제점

React를 사용해 자바스프링과 통신중에 자바스프링에서 session을 사용하여 값을 저장할 때 동일한 매핑에서는 정상적인 session을 내뱉었지만 매핑주소를 이동했을 때 session값이 null로 초기화되는 문제가 발생했다.

CORS의 설정은 미리 끝내놓았기 때문에 CORS문제는 아니라고 생각했고 코드를 살펴보았다.

 

Cors설정 config파일의 일부

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

 

Session사용 코드의 일부

System.out.println("Session user in controller: " + session.getAttribute("username"));
                return "로그인 성공" + username + ", Session ID: " + sessionId;
            } else {
                // 사용자가 존재하지 않는 경우
                System.out.println("아이디 또는 비밀번호가 잘못됐습니다: " + username + session.getId());
                System.out.println("Session user in controller: " + session.getAttribute("username"));
                return "Login failed: User not found for username: " + username + session.getId();
            }

코드를 보면 단순하게 세션을 저장하고 사용하는 코드로 코드에 문제가 전혀 발견되지 않았다.

 

해결

어째서 되지 않는지 계속해서 인터넷 서칭을 해본 결과 React에서 서버주소를 명시적으로 입력해서 발생한 문제라는것을 알게 되었다.

axios.post('/localhost:8080/login', {		//나를 고생시킨 범인

 

package.json의 일부분

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy" : "http://localhost:8080"
}

 

package.json에 proxy를 추가시켜주어 서버주소를 명시적으로 입력하지 않아도 되도록 설정해주었고

axios.post('/login', {		//나를 고생시킨 범인

위의 코드와 같이 수정하니 놀랍게도 세션 저장 문제가 전부 해결되었다