HTTP Headers: API 통신의 숨은 조력자 이해하기

HTTP 헤더란?

HTTP 헤더는 클라이언트와 서버가 주고받는 메타데이터입니다.
우리가 택배를 보낼 때 송장에 받는 사람 정보, 주의사항 등을 적는 것처럼, HTTP 통신에서도 부가 정보가 필요합니다.

주요 헤더 종류와 역할

1. Content-Type

headers: {
  "Content-Type": "application/json"
}

• 데이터의 형식을 알려주는 헤더
• 서버에게 "이 데이터는 JSON 형식이에요" 라고 알려주는 것
• 주요 값들:
  • application/json: JSON 데이터
  • text/plain: 일반 텍스트
  • multipart/form-data: 파일 업로드

2. Authorization

headers: {
  "Authorization": "Bearer eyJhbGciOiJIUzI1..."
}

• 사용자 인증 정보를 담는 헤더
• 주로 JWT 토큰을 전달할 때 사용
• "Bearer" 접두어는 토큰 기반 인증방식을 의미

3. Accept

headers: {
  "Accept": "application/json"
}

• 클라이언트가 어떤 형식의 응답을 원하는지 명시
• 서버에게 "JSON 형식으로 응답해주세요" 라고 요청하는 것

실제 사용 예시

1. 기본 설정:

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  headers: {
    "Content-Type": "application/json"  // 모든 요청에 적용될 기본 헤더
  }
});

2. 개별 요청에서 헤더 추가:

// 로그인 요청
axiosInstance.post('/auth/login', loginData, {
  headers: {
    "Client-Version": "1.0.0"  // 특정 요청에만 필요한 헤더
  }
});

// 파일 업로드
axiosInstance.post('/upload', formData, {
  headers: {
    "Content-Type": "multipart/form-data"  // 기본 헤더 덮어쓰기
  }
});

헤더 사용 시 주의사항

1. 대소문자 구분

• 헤더 이름은 대소문자를 구분하지 않음
• "content-type"과 "Content-Type"은 동일하게 처리

2. 값 형식

• 헤더의 값은 항상 문자열
• 숫자나 객체를 전달할 때는 문자열로 변환 필요

3. 보안

• 민감한 정보는 헤더에 노출하지 않기
• Authorization 헤더는 HTTPS 사용 권장

언제 다른 axios 인스턴스가 필요할까?

1. 기본 설정이 다른 경우:

// JSON 요청용
const jsonInstance = axios.create({
  headers: { "Content-Type": "application/json" }
});

// 파일 업로드용
const uploadInstance = axios.create({
  headers: { "Content-Type": "multipart/form-data" }
});

2. 인증 방식이 다른 경우:

// 일반 API용
const apiInstance = axios.create({
  headers: { "Authorization": `Bearer ${token}` }
});

// 외부 API용
const externalInstance = axios.create({
  headers: { "API-Key": "external-api-key" }
});

결론

HTTP 헤더는 API 통신에서 중요한 역할을 합니다.
데이터의 형식을 명시하고, 인증 정보를 전달하며, 추가적인 메타데이터를 제공합니다.
적절한 헤더 설정은 안정적인 API 통신의 기본이 됩니다.

때로는 다른 설정의 axios 인스턴스가 필요할 수 있습니다.
이는 코드의 재사용성을 높이고 유지보수를 쉽게 만듭니다. 하지만 너무 많은 인스턴스는 오히려 복잡성을 증가시킬 수 있으므로, 실제로 필요한 경우에만 생성하는 것이 좋습니다.