[405 Method Not Allowed] Allow: GET, HEAD, OPTIONS 만 나오는 경우... feat.멱등성

발단

세션로그인과 토큰로그인을 비교하는 개인프로젝트를 진행하면서 백엔드에 초점을 두다보니

로그인 html 코드를 그대로 구글링해서 가져왔다. 

기본적으로 api 구성해서 테스트했는데, 오류가 발생했다. 

POST http://127.0.0.1:5500/session_login 405 (Method Not Allowed)라고 확인되는데,

네트워크를 살펴보니 다음과 같았다. 

 

문제점

HTTP/1.1 405 Method Not Allowed
Access-Control-Allow-Origin: http://127.0.0.1:5500
Vary: Origin
Access-Control-Allow-Credentials: true
Allow: GET, HEAD, OPTIONS
Content-Length: 0
Date: Wed, 05 Jul 2023 13:18:46 GMT
Connection: keep-alive
Keep-Alive: timeout=5

여기서 한가지가 눈에 띄었다. Allow에 get, head, options만 있는 것이다. 

그러니까 오류 내용은 즉, 허용되지 않은 메서드를 써서 생기는 오류라는 것이다. 

그런데 get, head, options만 허용하도록 의도한 것이 아니기 때문에

왜 이렇게 설정이 된 것인지가 궁금했다. 그리고 일단 해결을 해야 하기도 했다.

 

 

해결 과정

먼저 CORS 가 생각이 났다. 하지만 오류 내용은 cors에 관한 것은 아니기도 하고,

애초에 프론트에서 테스트하는 것이기 때문에 cors 오류는 아니지만, 

저렇게 제한이 되는 이유를 모르겠어서, 백엔드단에서 cors에 대한 설정을 해서 허용해보기로 했다.

 

app.use(
  cors({
    origin: 'http://127.0.0.1:5500',
    methods: ['GET', 'POST', 'OPTIONS'],
    credentials: true,
  })
);

 

head를 post로 바꿔주었지만 적용이 되지 않았다.

사실 백엔드에서 어떤 변경을 하더라도 프론트단에서 테스트를 한 것이기 때문에 당연한 결과다.

프론트에서는 백엔드에서 cors로 허용해준 5500포트로 입력했다.

어느 부분에서 디버깅을 해야할지 싶어서 먼저 포트를 바꿔보았더니 당연하지만 403으로 찾지 못했다.

 

cors오류가 프론트엔드와 백엔드의 도메인, 포트 등이 다를 때 지정된 부분을 허용하는 것이고, 

그리고 현재 오류가 특정 부분에 대해서만 허용하고 있는 것이라면,

포트만 바꿔도 오류가 발생하는 영역에서 다른 오류가 발생하고 있으니 문제점은 드러난 것 같다.

 

해결

엔드포인트는 어차피 내가 설정하는 것이니 상관없고, 앞에 도메인이 문제인가?

아까도 문제삼았듯, 왜 post는 안되고 get만 허용하는 것인가? 여기서 힌트를 얻었다. 

생각해보니, 백엔드와 통신하는 것인데 프론트엔드도 같은 포트였다. 

물론 백에도 5500으로 입력하긴 했지만, 백엔드까지 가기 전에 자기 자신으로 인식하고 있었나 싶다.

 

프론트에서 테스트하고 있으니 백엔드에서 cors설정할 필요 없다고 생각까지 했으면서

저렇게 백엔드와 연결하는 곳에 프론트 포트를 넣고 있었으니.. 어이가 없었다.

백엔드 코드 짜겠다고 프론트 아예 복붙해온 내 불찰이다. 

 

백엔드의 포트를 4000으로 두고, api와 통신하는 것이니 그대로 4000으로 연결했더니, 성공했다. 

get만 허용한다는 것은 내 생각에는 자기 자신을 연결했으니 멱등한 메서드만 허용하는 것이 아닐까 싶다. 

코멘트

당연한 것인데, 기본적인 개념이 정확하게 박혀있지 않으니 돌고 돌아서 알게 되는 것 같다.

그저 프론트와 백이 주고받는다고만 알고 있다가, 점점 더 이해되는 영역이 넓어지고 있는데,

http에 대한 개념부터 완벽하게 익혀나가야 함을 절실히 느꼈다. 

이걸 시작하게 된 계기는 세션로그인과 토큰로그인을 같이 구성해서 직접 비교하기 위함이였는데, 

시작하기 전부터 많은 것들을 배우고 있다...^^