[server response] 백의 응답값으로 html이 오는 경우

이 문제로 3일을 소요했는데.. 차후에 강의를 보다보니 이 부분에 대해서 팁을 주는 부분이 있었다.

물론 강의에서 설명해주기 전에 직접 해결하여서 문제는 없었지만.. 시간을 너무 많이 소요한 거 같아서 분했다.⛏

 

[상황]

리액트로 만든 프로젝트에서 서버와 통신하는 도중에 값은 들어오는데 해당 값이 내가 원하던 JSON 객체가 아니라 HTML 문서가 304상태코드와 response 값으로 옴

 

[원인 분석]

1. 304상태 코드라면 브라우저의 캐시된 데이터를 쓰는 것이고 그렇다면 SWR의 데이터 캐시 문제일 것이다. (예상)

• 처음에는 SWR로 데이터가 undefined이면 화면에 컴포넌트를 띄우지 않는 것으로 처리해놨었는데 이상하게 값은 들어오는 것으로 확인되는데 화면에 컴포넌트에는 데이터가 뿌려지지 않는 것이다. 알고보니 JSON이 아니라 HTML이 response값으로 오고 있었는데 상태 코드가 304(not modified) 라서 SWR가 브라우저에 캐시한 값이 계속 들어오는 줄 알았다.
• 덕분에 아예 SWR쪽을 공부하고 캐시값에 대해서만 파고 있었는데 아무리 봐도 원하는 동작이 되지 않아서 보니, axios의 endpoint가 다르게 정의되어 있었다.

[실제 원인]

• 없는 주소로 클라이언트에서 요청을 보낼 시, 백엔드에서 404 에러가 아니라 304 상태코드와 HTML 문서를 반환하는 경우가 있다. 

[해결 방법]

• axios 요청을 정확한 endpoint로 변경하니 JSON객체로 제대로 값이 들어왔다. 
• 물론, response의 값도 JSON형식으로 들어오는 지 확인하고 상태코드도 200으로 떴다. 

즉, 없는 주소로 html 요청을 보냈을 때(혹은 있는 주소이지만 존재하지않는 http요청메서드(get, post등)) 서버에서 404 error 코드를 보내는 것이 아니라 304응답 코드와 함께 HTML 파일을 보내줄 수도 있다는 것이다.  

304는 프론트 입장에서 200에 가깝기 때문에 문제가 될 것이라고 생각하지 않았는데 이제는 data값이 JSON인지 확인하면서 잘 사용해야 겠다. 특히나 SPA를 만들고 있는 입장에서 첫 로드 이후로, 서버와 통신할 때 JSON형식의 데이터를 주고받는다는 전제사항을 머리에 각인시켜야 겠다. 

 

추가적으로 `304+HTML(응답값)`으로 에러 처리가 되는 것이 백엔드 자체적으로 설정한 것인지 아니면 백엔드 프레임워크의 기본동작인지 아니면 갖다쓴 비동기처리 라이브러리의 default동작인지까지 궁금했으나 이미 너무 많은 시간을 소요했기 때문에 넘기기로 했다.