[트러블 슈팅] HTTP Status Code

ww_ung·2025년 3월 24일

SK SKALA SKALA1기 http status code 트러블 슈팅

TroubleShooting

목록 보기

1/1

같은 조 끼리 각자만의 로그인 페이지를 구현 하던 와중 발생할 HTTP Status Code에 대한 트러블 슈팅이다. 로그인 서비스 깃허브 ## HTTP Status Code HTTP Status Code는 클라이언트 요청에 대해 서버가 응답한 결과 상태를 숫자로 나타낸 것이다.

주요 코드는 다음과 같다.

405 오류

프론트: /api/users/signup 으로 POST 요청 전송
서버: /api/users/signup 이라는 @PostMapping("/signup") 없음 → 405 Method Not Allowed
따라서 프론트 코드 고치기

회원가입 실패 : undefined

response.data.success가 undefined이기 때문
즉, 서버가 응답은 보냈지만, 그 응답(JSON)에 "success"라는 필드가 없어서 생기는 현상
방법 : 프론트에서 응답 구조에 맞게 처리

const signUp = async () => {
  try {
    const response = await axios.post('/api/users', {
      userId: userId.value,
      userName: name.value,
      nickname: nickname.value,
      password: password.value,
      phoneNumber: phone.value,
    })

    // 응답 구조에 따라 분기 처리
    if (response.status === 201) {
      alert('회원가입 성공!')
      router.push('/jaeung')
    } else {
      alert('회원가입 실패: 알 수 없는 상태')
    }
  } catch (error) {
    if (error.response) {
      console.log('서버 응답 에러:', error.response.data)
      alert('회원가입 실패: ' + (error.response.data.message || '서버 오류'))
    } else {
      alert('서버 연결 실패: ' + error.message)
    }
  }
}

201 반환 -> Created
요청이 성공적이었으며 그 결과로 새로운 리소스가 생성되었다. 이 응답은 일반적으로 POST 요청 또는 일부 PUT 요청 이후에 따라온다 라는 의미.

500 Internal Server Error

DataIntegrityViolationException
constraint [PUBLIC.CONSTRAINT_INDEX_4]
-> 중복된 DB의 Unique 제약조건을 위반해서 삽입 실패

회원가입 성공

그리고 그 이후 발생한 오류들...

400 Request failed with status code

잘못된 문법으로 서버가 요청을 이해할 수 없음을 의미
로그인 페이지 이동 후 아이디 비번 입력시 서버 오류 발생
로그인 페이지에서

const response = await axios.get('/api/users/login', {
      params: {
        id: userId.value,
        Pw : password.value,
      },
    })

파라미터가 제대로 적혀있지 않음을 확인

const response = await axios.get('/api/users/login', {
      params: {
        userId: userId.value,
        password: password.value,
      },
    })

수정했지만 여전히 400 오류 발생
콘솔을 찍어 브라우저 url은 정확히 보내졌음을 확인

GET http://localhost:8080/api/users/login?userId=a1&password=a1

핵심 오류 메시지 확인

message: 'Required request body is missing: public ...
loginUsers(com.practice.loginServer.dto.LoginRequest)'

백엔드에서 get 요청시 @requestBody를 사용할 수 없음
따라서 get->post로 프론트 변경

서버오류

서버 오류: Cannot invoke "com.practice.loginServer.domain.Users.getPassword()" because "users" is null

서버 내부 로직에서 null pointer 예외가 발생
users.getPassword() 를 호출하려 했는데
users 자체가 null (즉, 없는 사용자임)

params는 GET 요청용 파라미터에 쓰는 키이다
axios.post(..., { params: ... })라고 쓰면 → body가 아니라 이상한 형식이 들어간다.
서버의 @RequestBody는 body 안의 userId, password를 기대하는데,
지금은 body에 { params: { ... } }가 들어가니까 null이 들어가는 것

await axios.post('/api/users/login', {
  userId: userId.value,
  password: password.value,
})

이에 따라 params 키 삭제

정상적으로 회원가입 - 로그인 - 메인페이지 구현 성공

참고 페이지 (HTTP 상태 코드) : https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Status

ww_ung