Content-Type vs Accept vs responseType(feat. XHR, ajax)

HTTP 통신에서 사용하는 headers 중 Content-Type과 Accept, 그리고 XHR 프로퍼티중 하나인 responseType에 대해 비교하고 정리해보고자 합니다.

 

Content-Type

Content-Type은 Client가 서버로 보내는 HTTP요청의 Message Body가 가지고 있는 리소스 타입에 대해 알려주는 역할을 합니다. 예를 들어, 아래처럼 간단한 HTTP POST요청을 한다고 하였을 때, body에 들어가 있는 타입을 알려주는 역할을 한다는 것입니다. 여기에서는 json 형식이니, "application/json"을 넣어 주었습니다.

fetch('some/url', {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json'
	},
	body: JSON.stringify({ key: 'value' })
})

 

만약, formData를 보낸다고 한다면 "Content-Type": "multipart/form-data" 처럼 지정할 수 있을 것입니다.

 

만약에 POST요청을 "Content-Type"을 설정하지 않고 보낸다면, default는 "application/x-www-form-urlencoded

"이게 되고,
FormData를 보내는 경우에는 "multipart/form-data"가 default로 설정되게 됩니다.

---

Accept

클라이언트 자신이 원하는 미디어 타입 및 우선순위를 알려주기 위해 사용됩니다.

즉, 서버한테 나한테 이런 종류의 데이터를 응답으로 보내줘 라고 알려주는 역할이라고 생각하면 이해하기 쉽습니다.

 

---

responseType

responseType은 서버의 응답 데이터를 XHR Object가 어떤 포맷으로 Parse할 지 결정하는 속성입니다. 서버가 보내는 응답 데이터의 타입에 대해 정의한다는 점은 Accept와 같지만, 사용되는 level에서 차이가 있습니다.

 

앞서 설명 한 것처럼, Accept header는 Client가 서버에 요청할 때 자신이 받고 싶은 데이터의 타입을 설정하는 부분입니다. 이 header를 확인한 서버는 Accept에 맞도록 응답을 보내려고 할 것입니다. 

 

반면 XHR 객체의 responseType은 서버가 이미 보낸 응답을 브라우저가 js를 이용해서 어떤 포맷으로 parse할 지 결정할 때 사용되는 속성입니다. 

 

responseType에 사용될 수 있는 속성은 아래와 같습니다.(참고링크)

• "": default 값으로 "text"와 똑같이 처리 됩니다.
• "arraybuffer"
• "blob"
• "docuemnt"
• "json"
• "text"

---

파일 다운로드시 헤더 example

그럼 마지막으로 예시를 통해 정리해보도록 하겠습니다.

클라이언트가 파일 다운로드를 하기 위해 POST요청으로 body에 fileId를 실어 보내고, 서버는 클라이언트에게 byte[]로 응답을 해준다고 가정해봅시다. 이때, 파일다운로드 요청을 보낼 때 어떻게 보내면 좋을까요?

 

fetch('some/url', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/octet-stream',
    },
    responseType: 'blob' //혹은 'arraybuffer'도 좋습니다.
    body: JSON.stringify({ fId: 'someId' })
})

• Content-Type: 'application/json' - POST요청의 body에 심은 fileId가 json형식이라는 뜻
• Accept: 'application/octet-stream' - 파일 데이터를 바이너리데이터 형식으로 받고 싶다 라는 뜻
• responseType: 'blob' - 응답 데이터를 브라우저에서 blob 포맷으로 파싱하겠다는 뜻

 

혹시나 잘못된 점이 있거나 질문이 있다면, 댓글로 알려주시기 바랍니다. 감사합니다.