HTTP 헤더 종류

HTTP 헤더란 ?

HTTP 헤더는 클라이언트와 서버가 요청이나 응답시에 추가적인 정보를 주고 받는 부분이다.

요청 방식(GET, POST) 외에도 데이터 형식, 인증 정보, 응답 형식 등 부가 정보가 여기에 포함된다.

 

 

자주 사용하는 HTTP 헤더 종류

 

1. Content-Type

• 클라이언트가 서버에게 보낸 데이터를 예시로 보여주는 헤더

 예시 : 

• application/json -> JSON 형식 ( 가장 많이 쓴다. )
• multipart/form-data -> 파일 업로드
• application/x-www-form-urlencoded -> 폼 데이터
• 프론트 코드 예시

axios.post('/api/user',
{name : 'NiceKHJ' , email : 'NiceKHJ@tistory.com'},
{
	headers: {
    	'Content-Type' : 'application/json'
    }
}
);

 

 

2. Authorization

인증 정보를 담아 보내는 헤더로 ** JWT(토큰 기반 인증) **에서 가장 자주 사용된다.

• 프론트 코드 예시

const token = localStorage.getItem('accessToken');

axios.get('/mypage',{
  headers: {
    Authorization : `Bearer ${token}`
  }
});

 

 

3. Accept

클라이언트가 서버에게 받고 싶은 응답의 데이터 형식을 알려주는 헤더

 

예시 :

• application/json -> JSON 형식으로 응답 받고 싶을 때
• text/html -> HTML 페이지 형식으로 응답 받고 싶을 때
• 프론트 코드 예시

axios.get('/products',{
  headers : {
   Accept : 'application/json'
  }
});

 

 

4. Cookie

로그인 상태 유지나 사용자 정보 저장을 위해 클라이언트와 서버가 주고받는 정보를 쿠키에 담아 전송한다.

서버에서 Set-Cookie를 보내면 브라우저가 쿠키를 저장하고 이후 요청마다 자동으로 Cookie 헤더를 붙여서 서버에 전송한다,

 

withCredentials가 필요한 경우

기본적으로 브라우저는 다른 도메인으로 요청할 때 쿠키를 자동으로 보내지 않는다.

이때 withCredentials : true 를 설정해야 쿠키가 함께 전송된다.

상황	설명	설정 필요 여부
같은 도메인 or 프록시 개발환경	프론트와 백엔드가 같은 출처로 인식	❎  필요 없음
프론트와 백엔드 도메인이 다를 경우	Vercel + EC2, Netlify + Render 등	✅ withCredentials: true

• 프론트 코드 예시

axios.get('/mypage',{
  withCredentials:true // 다른 도메인에 쿠키 전송 허용
});

 

백엔드도 이때 꼭 Access-Control-Allow-Credentials : true 를 설정 해야 한다.