클라이언트는 POST로 body에 값을 보냈지만, 서버에서 undefined가 나온다면? Content-type을 확인해보기

우선,
headers에 content-type:application/json이 없어서 그렇다.

fetch('http://localhost:8080', {
    method: 'POST',
    headers: { 'Content-type': 'application/json' }, //<-----이게 없어서
    body: JSON.stringify({ something: 'something' }),
});

알고 있던건

http통신에 필요하다.라고만 알고있었다.

새로 알게된건

body에 보내는 데이터의 타입이 어떤타입인지 알려주는 옵션.

예를들어,
이미지인데 svg형태라 하면

• 'Content-type':"image/svg+xml",

이미지인데 png형태라 하면

• 'Content-type':"image/png",

오디오인데 mp4형식이면

• 'Content-type':"audio/mp4",

식으로 알려주는 역할이다.

content type을 적을 때는 type/subtype 형식으로 작성한다.

type은 아래의 10가지가 있고,
subtype은 이 링크에 무수히 많다.

• application
• audio
• font
• example
• image
• message
• model
• multipart
• text
• video

내가 찾던 application/json도 명시되어있다.
무지성으로 외워쓰던 이 옵션은 아래의 명세처럼 이런 일을 한다.

이 미디어 유형을 사용하는 애플리케이션: JSON은 다음과 같은 용도로 사용되었습니다.
이 모든 것으로 작성된 응용 프로그램 간에 데이터를 교환합니다.
프로그래밍 언어: ActionScript, C, C#, Clojure, ColdFusion,
Common Lisp, E, Erlang, Go, Java, JavaScript, Lua, Objective CAML,
Perl, PHP, Python, Rebol, Ruby, Scala 및 Scheme.

만약 content-type:application/json을 명시하지않고 요청하면 server request.body에 빈 객체로 들어갈 수 있다.

request.body객체에 특정 키가 들어오길 기대할텐데, 빈 객체에 특정 키로 접근하니 undefined가 나온다.

결론 : 로그를 잘 확인해보자.

참고 : Media Types(https://www.iana.org/assignments/media-types/media-types.xhtml)