http 요청과 응답의 구조 (Header와 Body)

eeensu·2025년 7월 20일
0

용어 정리와 팁

목록 보기
28/28

http의 요청과 응답은 헤더(Header)와 본문(Body) 두가지 요소로 나뉜다. 이 두 요소는 클라이언트와 서버 간의 데이터를 주고 받을 때 서로 다른 역할을 수행한다.

Header란?

헤더는 클라이언트와 서버가 서로 어떤 데이터를 주고받을지, 그리고 그 데이터를 어떻게 처리해야 할지를 미리 약속하는 지시문이다. 예를 들어, 헤더는 다음과 같은 지시(질문)에 대한 값(답)을 포함한다.

  • 내가 보내는 데이터는 어떤 형식일까? (JSON, HTML, 이미지 등)
  • 내가 누구인지 (사용자 정보) 서버에 어떻게 알려줄 수 있을까? (사용자 에이전트 정보)
  • 서버가 응답으로 보내는 데이터는 어떻게 해석해야할까? (응답 데이터의 언어, 인코딩 방식)

이를 바탕으로 예시를 살펴보면 아래와 같다.
fetch('https://api.example.com/data', {
    method: 'GET', // HTTP 메서드를 GET으로 설정
    headers: {
        'Host': 'api.example.com', // 요청이 향하는 서버의 도메인 (보통 자동 설정됨)
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36', // 클라이언트 정보
        'Content-Type': 'application/json', // 응답을 JSON 형식으로 받고 싶음을 서버에 알림
        'Authorization': 'Bearer some-token' // 인증 정보를 헤더에 포함
    }
})
  • GET - 브라우저가 index.html 이라는 파일을 요청한다.
  • Host - 요청할 서버의 도메인이 www.exmple.com임을 나타낸다.
  • User-Agent - 브라우저와 운영 체제 정보(여기서는 Mozilla/5.0이 사용 중)이다.
  • Accept - 브라우저가 HTML 형식의 응답을 원한다는 것을 서버에 알린다.


Header의 역할

헤더는 데이터를 어떻게 보내고 받을지 정의한다. 여기에는 데이터 형식, 사용자 정보, 인증 정보, 캐시 설정 등이 포함된다. 예를 들어

  • Content-Type 헤더는 데이터가 어떤 형식인지 서버에 알려준다.
  • Authorization 헤더는 서버에 요청을 보낼 때 사용자의 인증 정보를 포함시킨다.



Body란?

본문은 실제 데이터를 담고 있는 부분이다. 클라이언트와 서버가 실제로 주고받는 내용이 여기에 포함된다. 요청의 경우, 사용자가 입력한 데이터(로그인 정보)가 본문에 담겨서 서버로 전송된다. 응답의 경우, 서버가 반환하는 데이터(웹 페이지의 내용, 이미지 파일, 요청의 데이터 등)가 본문에 담겨서 클라이언트로 전송된다.

예를 들어, 사용자가 로그인할 때 입력한 정보를 서버로 보내는 POST 요청을 살펴보자

fetch('https://www.example.com/login', {
    method: 'POST', // HTTP 메서드를 POST로 설정
    headers: {
        'Host': 'www.example.com', // 요청이 향하는 서버의 도메인 (일반적으로 자동 설정됨)
        'Content-Type': 'application/json' // 서버에 보낼 데이터가 JSON 형식임을 명시
    },
    body: JSON.stringify({
        username: 'user1',
        password: 'pass123'
    }) // 본문에 JSON 형식으로 데이터를 포함
})


서버가 클라이언트의 요청에 응답할 때, 응답 본문에 필요한 데이터를 담아 반환할 수 있다. 예를 들어, 사용자가 로그인을 성공적으로 완료한 후, 서버가 인증 토큰을 반환하는 경우이다.
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 85

{
  "status": "success",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}


보안 고려 사항

본문에 민감한 데이터(예: 비밀번호, 신용카드 정보 등)를 포함할 때는 보안이 매우 중요하다. 이를 위해 HTTPS(SSL/TLS)를 사용하여 데이터가 암호화된 상태로 전송되도록 해야 한다. 또한, 서버 측에서도 본문에 포함된 데이터를 안전하게 처리하고 저장하는 것이 중요하다.

profile
안녕하세요! 프론트엔드 개발자입니다! (2024/03 ~)

0개의 댓글