2022-08-05: HTTP STATE CODE

https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C

HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전

프로젝트 중 서버와 웹 API를 연결하는 과정에서 여러 상태코드가 나왔는데, 그것들을 해결하는 과정에서 위 사이트를 참고했다.

위 사이트에 헤더 부분에 다음과 같은 내용이 있다.

• 1xx (정보): 요청을 받았으며 프로세스를 계속한다
• 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다
• 3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다
• 4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다
• 5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다

주로 나오는 코드는 2xx, 4xx, 5xx인데 이 중에서도 자주 나온 상태코드와 그에 대한 해결 방법을 기록해두려고 한다.

1. 2xx (성공)

클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음을 가리킨다.

1. 200(Success)
   1. 의미: 서버가 요청을 제대로 처리했다는 뜻. 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.
   2. 설명: 이 코드가 뜬다면 axios 요청이 제대로 수행됐다는 것이기 때문에 안심하면 된다.
2. 204(No Content)
   1. 의미: 서버가 요청을 성공적으로 처리했지만 콘텐츠를 제공하지 않는다.
   2. 설명: 내 생각으로는 제일 골치아픈 상태 코드였다. axios 성공은 했지만 DB에는 저장되지 않았다.
   3. 해결: 서버 측에 문의를 해야한다. 서버 측에서 요청을 승인할 때 state code와 함께 content를 줘야한다.

 

2. 4xx (요청 오류)

클라이언트에 오류가 있음을 나타낸다.

1. 400(Bad Request, 잘못된 요청) 
   1. 의미: 서버가 요청의 구문을 인식하지 못했다.
   2. 해결: POST, PUT에서 자주 나오는데 axios 요청과 함께 보내는 데이터를 확인해야 한다.
2. 403(Forbidden, 금지됨)
   1. 의미: 서버가 요청을 거부하고 있다. 예로, 사용자가 리소스에 대한 필요 권한을 가지고 있지 않다.
   2. 설명: axios 요청을 했을 때 자주 나온 코드로, 서버에 넘겨줘야 하는 데이터들을 다 넘겨주지 않았다는 의미.
   3. 해결: data나 headers를 잘 확인해야 한다. 특히 data를 넘겨줄 때 오타는 없는지, undefined인 데이터는 없는지 봐야 한다.
   4. 참고: 만약 제대로 동작하는 것을 확인했는데 한참 뒤에 웹에 들어왔을 때 403 에러가 뜨는 경우가 있다. 이 때는 로그아웃하지 않고 나갔기 때문에 토큰이 만료됐고 따라서 headers 부분이 잘못됐기 때문이다. 따라서 로그아웃을 하고 다시 로그인을 하면 해결된다. / 회원탈퇴했는데 로그인했을 경우에도 403 코드가 뜬다.
3. 404(Not Found, 찾을 수 없음)
   1. 의미: 서버가 요청한 페이지(Resource)를 찾을 수 없다. 예로, 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버가 이 코드를 제공한다.
   2. 설명: React를 활용한 경우 웹에서 Route를 통해 url을 만들어주는데, 이렇게 만들어진 url 주소가 아닌 다른 주소를 입력했을 경우 나온다.
   3. 해결: 클라이언트 측의 실수이기 때문에 제대로 된 url로 들어가면 해결된다. 가장 간단하게 해결할 수 있는 에러이다. 보통 웹에서 url을 다 할당하고 나서 "*" Route를 하나 더 만들어서 404 코드를 보여주는 페이지를 띄우는 식으로 사전처리를 해준다.

 

3. 5xx (서버 오류)

서버가 유효한 요청을 명백하게 수행하지 못했음을 나타낸다.

1. 500(내부 서버 오류)
   1. 의미: 서버에 오류가 발생하여 요청을 수행할 수 없다.
   2. 설명: 여러 원인이 있는데, 주된 원인은 CORS와 웹에서의 잘못된 데이터 전송이다.
   3. 해결: 
      1. CORS 에러의 경우 서버에서 처리를 해줘야 한다. 현 프로젝트에서는 필터 처리로 해결했다.
      2. 웹에서 잘못된 데이터를 전송한 경우에도 에러에 CORS가 뜰 수 있기 때문에 만약 서버에서 CORS를 다 해결했는데도 500 에러(혹은 CORS 에러 문구)가 뜬다면 403 상태코드 경우처럼 올바른 데이터를 서버에 전송했는지를 확인하면 된다.