Content-Disposition HTTP 헤더란?

By
markettraders
-
0
677

Content-Disposition은 HTTP 헤더의 하나로, 웹 서버가 HTTP 응답의 일부로 클라이언트(예: 웹 브라우저)에게 전송하는 데이터의 표현 방식을 알려주는 데 사용됩니다. 이 헤더는 주로 브라우저가 받는 데이터를 어떻게 처리할지 지시하는 데 쓰이며, 가장 일반적인 사용 예는 파일 다운로드입니다. Content-Disposition 헤더를 사용하면 서버는 클라이언트에게 특정 데이터를 화면에 표시하는 대신 파일로 다운로드하도록 지시할 수 있으며, 원하는 파일 이름을 제안할 수도 있습니다.

Content-Disposition 헤더 사용방법

  1. 인라인(Inline) 콘텐츠: Content-Disposition: inline은 기본값이며, 이 경우 브라우저는 콘텐츠를 현재 페이지 또는 인라인 프레임 내에서 직접 표시하도록 지시받습니다. 이 옵션은 이미지나 PDF와 같이 웹 페이지 내에서 직접 볼 수 있는 콘텐츠 유형에 주로 사용됩니다.
  2. 첨부파일(Attachment): Content-Disposition: attachment는 브라우저에게 콘텐츠를 화면에 표시하는 대신 파일로 다운로드하라는 명령을 내립니다. 선택적으로 filename 매개변수를 사용하여 다운로드할 파일의 이름을 지정할 수 있습니다. 예를 들어, Content-Disposition: attachment; filename=”example.pdf”는 파일을 “example.pdf”라는 이름으로 다운로드하라는 지시를 내립니다.

Content-Disposition 헤더의 형식

  • 기본 형식: Content-Disposition: <disposition-type>
  • 파일명을 지정하는 경우: Content-Disposition: attachment; filename=”filename.jpg”

파일 이름 인코딩

파일 이름에 비ASCII 문자가 포함된 경우, 이를 올바르게 처리하기 위해 filename* 매개변수와 함께 인코딩된 파일 이름을 제공할 수 있습니다. 예를 들어, UTF-8 문자 인코딩을 사용하여 한글 파일 이름을 지정하려면 다음과 같이 할 수 있습니다.

Content-Disposition: attachment; filename*=UTF-8”%EC%98%88%EC%A0%9C.pdf

여기서 %EC%98%88%EC%A0%9C.pdf는 URL 인코딩된 문자열입니다.

Content-Disposition 헤더는 웹 개발에서 사용자가 서버로부터 받는 콘텐츠를 어떻게 처리할지 제어하는 중요한 수단입니다. 이를 통해 개발자는 사용자에게 더 나은 경험을 제공하고, 예를 들어 특정 문서를 자동으로 다운로드하게 만들거나, 특정 콘텐츠를 직접 브라우저에서 볼 수 있게 할 수 있습니다.

한글이름의 파일 깨짐이 있을 경우 Content-Disposition 설정 예시

uploadVideo(file, index) {
    const formData = new FormData();
    formData.append('videos', file);

    // 파일 이름을 encodeURIComponent를 통해 UTF-8로 인코딩하여 설정
    const contentDisposition = `attachment; filename*=UTF-8''${encodeURIComponent(file.name)}`;
    
    // 요청 헤더에 Content-Disposition 추가
    const options = {
        headers: {
            'Content-Disposition': contentDisposition,
            'Content-Type': 'multipart/form-data' // Content-Type 설정
        }
    };

    // API 호출 시 옵션을 함께 전달
    this.api('post', '/video/upload', formData, options);
}