HTTP 405 METHOD NOT ALLOWED 발생!

뭐하다가 생겼니

졸업프로젝트를 하다가 다음의 에러를 맞닥뜨렸다.

HTTP 405 에러가 발생했다는데,,, 우선 지금 진행하는 부분이 뭐였는지 말하자면,

• 서버에서 뉴스기사 배너의 순서를 받아옴 (orderedList)
• 해당 순서대로 뉴스기사를 출력 (사진에서는 1, 4, 2, 3, 5 순서)
• 열람(클릭)한 기사는 successList에 담김
• 열람하지 않은 기사는 failureList에 담김
• "돌아가기"를 누르면 서버에 해당 데이터를 보냄
• 서버는 받은 데이터로 Thompson Sampling을 수행하여, 새로운 배너 순서를 저장
• 다시 페이지를 열람하면, 새로운 배너 순서를 받아옴 (orderedList)

대충 이런 식의 시나리오인데, 이제 서버에 보낼 데이터 양식을 보자.

이런 식으로 보내주기 위해서 "돌아가기" 버튼을 눌렀을 때 실행되는 함수 handleSubmit을 다음과 같이 정의했다.

const handleSubmit = () => {
  sendBannerStatus(ballotId, successList, failureList);
  router.push(`/ballot/ongoing`);
}

서버에 보낼 api용 POST 함수 sendBannerStatus는 이렇게.

export const sendBannerStatus = async (ballotId: number, successList: number[], failureList: number[]) => {
    const result = await FlaskServer.post(`/${ballotId}`, {
        ballotId,
        successList,
        failureList
    });
    return result.data;
}

그랬더니 에러가 나버렸네요?

그래서 405가 뭔데

HTTP 405 METHOD NOT ALLOWED 는 이름에서 보이듯 메소드가 맞지 않을 때 발생한다고 한다.
예를 들어, GET을 써야 하는 주소로 POST 요청을 보낼 때라던가..

위의 상황에선 서버에서는 PATCH로 받으려는데 POST로 보내기 때문에 발생한 듯 싶....지만?
위의 코드에서는 PATCH로 바꾸어도 동일한 오류가 난다.
PATCH와 POST의 혼동은 405 에러가 발생하지 않는다. (근거는 아래에서 확인)

그러면 왜 발생했는지? 작업치료과를 아는지? 왹왹왹
서버에서 제공한 API를 postman으로 확인해 보자.

각 요청을 들어가보면..
POST는 http://서버주소
GET은 http://서버주소/${ballotId}
PATCH는 http://서버주소 로 접근해야 하는데,

위의 코드를 보면 GET 메소드를 원하는 http://서버주소/${ballotId} 로 POST 요청을 보냈다.
따라서 PATCH로 바꾸어도 405 에러가 나는 것이다.
그래서 간단히 주소를 알맞게 바꿔줬다. 얼마나 영혼 없이 코드를 짰으면 이런 일이...

export const sendBannerStatus = async (ballotId: number, successList: number[], failureList: number[]) => {
    const result = await FlaskServer.patch(`/`, {
        ballotId,
        successList,
        failureList
    });
    return result.data;
}

이걸로 끝냈어야 했는데,
실리카겔 노래 들으면서 하니까 상상력 호기심 그런게 어디서 나왔는지 실험을 시도했다.

PATCH와 POST 간의 405 에러?

는 발생하지 않는다.
나도 알고싶지 않았는데, 그냥 코드 바꾸면서 확인하다가 발견했다.

export const sendBannerStatus = async (ballotId: number, successList: number[], failureList: number[]) => {
    const result = await FlaskServer.post(`/`, {
        ballotId,
        successList,
        failureList
    });
    return result.data;
}

이렇게 방금 위의 코드에서 메소드만 PATCH에서 POST로 바꾸니까
메소드가 다르다고 405 에러가 나지 않고 그대로 POST가 되어버렸다.

그 결과,

서버에 저장된 orderedList를 아예 다른 형식으로 덮어씌워버려서 데이터가 날라갔다 ㅋㅋㅋ.......😵‍
더미데이터라 다행이다. 다음부턴 이런일 안겪을듯