React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

1import { useNavigate } from "react-router-dom";
2import { useEffect } from "react";
3import { useCookies } from 'react-cookie';
4import axios from "axios";
5import Loading from "../layout/Loading";
6
7
8const KakaoLoginHandler = () => {
9    const [cookies, setCookie] = useCookies(['userId', 'userName']);
10    const navigate = useNavigate();
11    const code = new URL(window.location.href).searchParams.get("code");
12
13    const kakaoLogin = () => {
14        axios({url:`${import.meta.env.VITE_SERVER_URL}/v1/login/kakao-login` , method:'post',
15            params: { code : code} })
16            .then(response => {
17            const { id, username } = response.data;
18            setCookie('userId', id, { path: '/' });
19            setCookie('userName', username, { path: '/' });
20            navigate('/home');
21        })
22        .catch(error => {
23            console.error('Error fetching data:', error);
24        });
25    }
26    
27    useEffect(() => {
28        kakaoLogin();
29    }, []);
30
31    return (
32        <>
33            <Loading/>
34        </>
35    );
36};
37
38export default KakaoLoginHandler;

• ‌

  
• ‌

  

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 1

보충이 필요해요 0

익명님의 질문