HTTP의 헤더

헤더의 분류

일반 헤더(General Headers): 요청과 응답 모두에 적용되는 헤더입니다. 예를 들면, 'Cache-Control', 'Pragma' 등이 있습니다.
요청 헤더(Request Headers): 클라이언트에서 서버로의 요청에만 사용되는 헤더입니다. 이들 헤더는 요청의 조건, 클라이언트 정보 등을 전달합니다. 예를 들면, 'Accept', 'Origin', 'User-Agent' 등이 있습니다.
응답 헤더(Response Headers): 서버에서 클라이언트로의 응답에만 사용되는 헤더입니다. 이들 헤더는 응답의 정보, 서버 정보 등을 전달합니다. 예를 들면, 'Age', 'Server', 'Accept-Ranges' 등이 있습니다.
엔티티 헤더(Entity Headers): 요청이나 응답 본문에 대한 정보를 제공합니다. 예를 들면, 'Content-Type', 'Content-Encoding', 'Content-Length' 등이 있습니다. (요청헤더와 응답헤더 어느쪽에도 포함됨)

General Headers

전송의 요청/응답에대한 전반적인 정보

Date : 현재시간
Cache-Control : 캐시 제어
+ no-cache : 모든 캐시를 쓰기 전에 서버에 해당 캐시를 사용해도 되는지 확인하겠다.
+ public : 공유 캐시에 저장해도 된다.
+ max-age : 캐시의 유효시간을 명시하겠다.
+ private : '브라우저' 같은 특정 사용자 환경에만 저장하겠다.
+ must-revalidate : 만료된 캐시만 서버에 확인하겠다.
+ no-store : 캐시를 저장하지 않겠다.
Connection : 클라이언트와 서버의 연결 방식 설정
-> close : 메시지 교환 후 TCP 연결 종료
-> Keep-Alive : 메시지 교환 후 TCP 연결 유지

Entity header

실제 주고받는 컨텐츠와 관련된 http 본문에 대한 정보가 담겨져 있다

( 요청헤더와 응답헤더 어느쪽에도 포함될수있다 )

Content-type : 본문의 미디어 타입(MIME) ex) application/json, text/html
Content-Length : 본문의 길이
Content-language : 본문을 이해하는데 가장 적절한 언어 ex) ko
Last-Modified : 최근에 수정된 날짜
Expires : 자원의 만료 일자
Allow : 해당 자원 사용이 가능한 HTTP 메소드 방식 ex) GET, HEAD, POST

Request header form

서버에 요청에 대한 정보

Host : 요청하려는 서버 호스트 이름과 포트번호
Referer : 바로 직전에 머물렀던 웹 링크 주소(해당 요청을 할 수 있게된 페이지)
Accept : 클라이언트가 처리 가능한 미디어 타입 종류 나열 ex) / - 모든 타입 처리 가능, application/json - json데이터 처리 가능.
Accept-charset : 클라이언트가 지원가능한 문자열 인코딩 방식
Accept-language : 클라이언트가 지원가능한 언어 나열
Accept-encoding : 클라이언트가 해석가능한 압축 방식 지정 ex) gzip, deflate
압축이 되어있다면 content-length와 content-encoding으로 압축을 해제한다.
Content-location : 해당 개체의 실제 위치
If-Modified-Since : 여기에 쓰여진 시간 이후로 변경된 리소스 취득. 페이지가 수정되었으면 최신 페이지로 교체하기 위해 사용된다.
Authorization : 인증 토큰을 서버로 보낼 때 쓰이는 헤더
Origin : 서버로 Post 요청을 보낼 때 요청이 어느 주소에서 시작되었는지 나타내는 값
이 값으로 요청을 보낸 주소와 받는 주소가 다르면 CORS 에러가 난다.
Cookie : 쿠기 값 key-value로 표현된다. ex) attr1=value1; attr2=value2

Response header form

서버로부터 응답에 대한 정보

Location : 301, 302 상태코드일 떄만 볼 수 있는 헤더로 서버의 응답이 다른 곳에 있다고 알려주면서 해당 위치(URI)를 지정한다.
Server : 웹서버의 종류 ex) nginx
Age : max-age 시간내에서 얼마나 흘렀는지 초 단위로 알려주는 값
Referrer-policy : 서버 referrer 정책을 알려주는 값 ex) origin, no-referrer, unsafe-url

실제 예제

아래의 예제에서 headers에 Accept란 항목이 없으면 서버에서는 에러 발생시 HTML을 화면에 반환한다

그래서 아래와 같이 서버에서 받은 HTML을 JSON형식으로 해결할수없다고 에러 메세지가 나온다

Unexpected token '<', \"<!DOCTYPE \"... is not valid JSON"

만약에 Accept: "application/json",를 추가할 경우 서버에게 화면에서 json형식만 취급한다고 알려준다

그렇기 때문에 서버에서 에러발생시 json 형식으로 화면에 반환하게 된다

"HTTP error! status: 422

참조 예제

try {
    const response = await fetch("/image", {
        method: "POST",
        body: formData,
        headers: {
            Accept: "application/json", // 여기
        },
    });

    if (!response.ok) {
        throw new Error(
            `HTTP error! status: ${response.status}`
        );
    }

    const data = await response.json();

    return callback(data.url);
} catch (error) {
    debugger;
    console.error("Error:", error.message);
}

2024/1/7 추가정리

개발자모드 개발자 모드에서 확인한 헤더정보

HTTP요청의 구조

헤더와 바디(html,css,json,file등..)로 이루어진다

1.제너럴헤더

클라이언트 ↔︎ 서버

1.양측 모두 포함된 공통 헤더 정보

2.캐시의 옵션에 대한 정보나 현재시간 클라이언트와 서버의 연결방식등의 공통된 정보를 주고받는다

3.바디의 정보와는 관계없다

2.리퀘스트 헤더

클라이언트 → 서버

1.인증/인가정보(Authorization)등과 요청하는 리소스정보를 보낸다

3.레스폰스 헤더

서버 → 클라이언트

1.CORS설정

2.서버정보

4.엔티티 헤더

클라이언트 ( 리퀘스트헤더 ) ↔︎ 서버 ( 레스폰스헤더 )

1.양측의 리퀘스트 헤더와 레스폰스 헤더에 포함됨

2.content-type등의 전송하고 받는 바디에 대한 메타정보를 포함한다

리퀘스트 헤더에 정보를 추가해서 보내는 예제

... 파이선으로 naver의 papagoApi에 요청을 보내는 예제...
request = urllib.request.Request(url)
request.add_header("X-Naver-Client-Id", client_id) // 요청을 하면 papagoApi가 사용할수있도록 client_id를 리퀘스트 헤더에 추가한다
request.add_header("X-Naver-Client-Secret", client_secret)

참조

https://codify.tistory.com/91

https://hazel-developer.tistory.com/145

Jul 29, 2023 Views 134

댓글작성

선택항목 삭제