Home IT/WEB Content-Disposition HTTP 헤더란?

Content-Disposition HTTP 헤더란?

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”

파일 이름 인코딩

inline ad

파일 이름에 비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);
}

RECENT POSTS

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...