HTTP request, respone header

·2022년 7월 23일

Request Header

  • Accept
    • 응답받았으면 하는 데이터 타입을 명시한다.
    • 콤마로 여러 타입을 동시에 적을 수 있고, *(와일드카드) 사용 시 '텍스트이기만 하면 된다'는 의미로 사용할 수 있다.
  • Accept-Encoding
    • 응답 데이터가 클 경우 데이터는 압축해서 전달되는데 해당 타입의 브라우저에서 지원하는 형식을 알려준다.
  • Accept-Language
    • 클라이언트가 이해할 수 있는 언어를 알려준다.
    • 언어가 일치하지 않는경우 406 에러가 발생하기도 하지만 보통 Accept-Language를 무시한다.
  • Host
    • 웹 서버의 주소를 의미한다.
    • 주소에 따라 가상호스트를 설정할 수 있다.
    • 한대의 피씨에 서버가 여러개인 경우 port번호를 통해 구분한다.
  • User-Agent
    • 요청을 보낸 사용자 환경을 의미한다.
  • Sec-Fetch-Site
    • CORS를 확인한다.
  • Referer
    • 요청을 보낸 페이지의 주소를 가진다.
    • 어디로 접속해서 방문중인지를 인식할 수 있게 해준다.

Post 의 경우

  • Origin
    • CORS 확인을 위한 주소를 가진다.
    • Referer과 비슷하지만 전체 경로를 공개하지는 않는다.

Respone Header

  • HTTP/1.1 200 OK
    • HTTP/1.1: 버전
    • 200 OK: 상태/결과 값
  • Content-Type
    • 응답받은 데이터 타입
    • 해당 타입으로 브라우저가 서버로 부터 받은 데이터를 뿌려준다.
  • Cache-Control
    • 캐시 요청에 따른 응답을 가진다.

Preflight request

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://bar.other/resources/post-here/');
xhr.setRequestHeader('X-PINGOTHER', 'pingpong');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.onreadystatechange = handler;
xhr.send('<person><name>Arun</name></person>');

$.ajax({
    type : 'POST',
    url : 'https://bar.other/resources/post-here/',
    dataType : 'xml',
    beforeSend : function(xhr){
    xhr.setRequestHeader("X-PINGOTHER', 'pingpong"); 
    xhr.setRequestHeader("Content-type","application/xml");
  },
  error: function(xhr, status, error){ 
    alert(error); 
  }
  success : function(xml){
    alert(xml)
  },
});

**참고
CORS(교차 출처 리소스 공유)
Access-Control-Request-Headers
Fetch

profile
으쌰으쌰🐜🐜

0개의 댓글