JQUERY 의 AJAX를 통한 서버 header 데이터 주고 받기

지난편에서 `SetEnvIf 를 활용한 헤더(header) 데이터 받기` 를 알아보았고 이번편에서는 AJAX 통신으로 헤더값을 주고 받는 방법에 대해 알아보고자 한다. (왠지 내가 올린글들만 설명이 많이 떨어지는것같다..)

JQUERY 의 AJAX 로 헤더 데이터를 담아 보내기

서버에 index.php 파일을 만든다음 아래 소소코드를 복붙한다. 참고로 헤더 데이터에 대한 자세한 내용은 소스상 주석에도 남겨두었으니 확인해보길 바란다.

<!-- index.php -->
<input type="button" value="전송">
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><?php // http://craftpip.github.io/jquery-confirm/ ?> 
<script type="text/javascript">
	$('input[type="button"]').on('click',function(e){
		/*
			본래 규칙으로 보면 key값은  대문자로 시작 뒤에는 소문자로 와야한다. 
			하지만 키값을 다르게 쓴다면 정상적인 키값을 받을 수 없으니 대문자 또는 소문자 처리하여 받아야하는데 
			이를 서포트 해줄 수 있는 방법은 키값을 따로 보내거나 server 단에서 고정값으로 처리하는것이다. 
			헤더의 키값은 제약사항이 많고 영문과 하이픈까지 지원하지만 하이픈은 $_SERVER 에서 자체적으로 언더바를 붙여서 만든다
				ex) AuthUserEmail-Value => $_SERVER['HTTP_AUTHUSEREMAIL_VALUE']
			따라서 되도록 키값은 규칙상 대문자로 시작해서 소문자로 주도록 하자
		*/
		var headerKey = new Array('AuthUserID','AuthUserEmail-Value');
		var req = {url:'/server.php',data:{headerKey : headerKey},type:'post',dataType:'json'};
		req.beforeSend = function(xhr){
			xhr.setRequestHeader('AuthUserID','redinfo');
			xhr.setRequestHeader('AuthUserEmail-Value','test@redinfo.co.kr');
		};					
		$.ajax(req)
		.done(function(e){
			console.log(e);
		});
	});
</script>

스크립트 내 소스중 아래의 소스는 서버단에서 받아서 처리할 키값을 미리 지정해 주는것이다. 전송된 헤더 데이터는 특정 규칙을 가지고 키값을 바꾸기 때문에 보낸 데이터 키양식이 대문자로 시작해서 소문자가 반복되고 끝나지 않을 경우 정해진 패턴으로 키값을 변경해 버리기 때문에 아래와 같이 고정될 키값을 데이터에 정의해서 보내준다.

var headerKey = new Array('AuthUserID','AuthUserEmail-Value');

그다음으로 볼 소스는 헤더 데이터이다. AJAX는 헤더 데이터를 beforeSend 안에 담아서 보낼 수 있는데 여러개 일 경우 아래와 같이 연속으로 선언해 주면된다.

req.beforeSend = function(xhr){
	xhr.setRequestHeader('AuthUserID','redinfo');
	xhr.setRequestHeader('AuthUserEmail-Value','test@redinfo.co.kr');
};

위의 AJAX 요청이 있을 경우 예상되는 결과값은 아래와 같이 볼 수 있다.

apache_request_headers() 함수를 이용할 경우

{
    Accept: "application/json, text/javascript, */*; q=0.01"
    Accept-Encoding: "gzip, deflate"
    Accept-Language: "ko,ko-KR;q=0.9,und;q=0.8"
    Authuseremail-Value: "test@redinfo.co.kr"
    Authuserid: "redinfo"
    Connection: "keep-alive"
    Content-Length: "62"
    Content-Type: "application/x-www-form-urlencoded; charset=UTF-8"
    Host: "test.redinfo.co.kr"
    Origin: "http://test.redinfo.co.kr"
    Referer: "http://test.redinfo.co.kr/"
    User-Agent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36"
    X-Requested-With: "XMLHttpRequest"
}

$_SERVER 변수를 이용할 경우

{
    HTTP_ACCEPT: "application/json, text/javascript, */*; q=0.01"
    HTTP_ACCEPT_ENCODING: "gzip, deflate"
    HTTP_ACCEPT_LANGUAGE: "ko,ko-KR;q=0.9,und;q=0.8"
    HTTP_AUTHUSEREMAIL_VALUE: "test@redinfo.co.kr"
    HTTP_AUTHUSERID: "redinfo"
    HTTP_CONNECTION: "keep-alive"
    HTTP_HOST: "test.redinfo.co.kr"
    HTTP_ORIGIN: "http://test.redinfo.co.kr"
    HTTP_REFERER: "http://test.redinfo.co.kr/"
    HTTP_USER_AGENT: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36"
    HTTP_X_REQUESTED_WITH: "XMLHttpRequest"
}

위의 결과들을 보면 전혀 예상치 못한 키값으로 대체된걸 볼 수 있다. 그래서 이를 서포트하기위해 키값을 데이터로 담아서 추가로 보내서 처리하도록 하는것이다.

SERVER 단에서 헤더 데이터를 가공하여 받기

서버단 프로그램은 예제로 server.php로 만들어서 받으면 된다. 소스코드의 경우 아래 소스를 복붙하면 된다.

<?php 
	$headers = array();
	$headerKey = !isset($_POST['headerKey']) || !is_array($_POST['headerKey']) ? array() :  $_POST['headerKey'];
	$httpKey = array();

	$arh = array();
	if( !function_exists('apache_request_headers')){ // apache_request_headers 함수가 지원될 떄
		$arh = apache_request_headers();
		foreach($headerKey as $k=>$v){
			$httpKey[strtoupper($v)] = $v;
		}		
		foreach($arh as $k=>$v){
			if( count($httpKey) > 0 && isset($httpKey[strtoupper($k)])){
				$headers[$httpKey[strtoupper($k)]] = $v; // 원래 키값으로 대체
			}else{
				$headers[$k] = $v;
			}
		}
	}

	else{
		$arh = $_SERVER;
		if( count($headerKey) > 0){
			foreach($headerKey as $k=>$v){
				$httpKey[strtoupper('HTTP_'.str_replace("-", "_", $v))] = $v; // 하이픈을 언더바로 변경
			}
		}
		foreach($arh as $k=>$v){
			if(!preg_match("/^(HTTP_)/",$k)) continue;
			if( count($httpKey) > 0 && isset($httpKey[strtoupper($k)])){
				$headers[$httpKey[strtoupper($k)]] = $v; // 원래 키값으로 대체
			}
			else{
				$headers[$k] = $v;
			}
		}
	}
	die(json_encode(array('headers'=>$headers,'arh'=>$arh)));

상단의 소스코드를 간단하게나마 해석하자면 서버에 apache_request_headers() 함수 지원 여부에 따라 작동하도록 구성이 되어있고 데이터로 넘겨준 키값을 이용하여 헤더값을 가공하여 맞추어 주고 결과값을 리턴하는 방식이다.

위와 같이 보내게 되면 아래와 같이 원하는 키값을 받을 수 있다.

apache_request_headers() 함수를 이용할 경우

{
    "Accept-Language": "ko,ko-KR;q=0.9,und;q=0.8",
    "Accept-Encoding": "gzip, deflate",
    "Referer": "http://test.redinfo.co.kr/",
    "Origin": "http://test.redinfo.co.kr",
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36",
    "AuthUserEmail-Value": "test@redinfo.co.kr",
    "AuthUserID": "redinfo",
    "X-Requested-With": "XMLHttpRequest",
    "Accept": "application/json, text/javascript, */*; q=0.01",
    "Content-Length": "62",
    "Connection": "keep-alive",
    "Host": "test.redinfo.co.kr"
}

$_SERVER 변수를 이용할 경우

{
    "HTTP_ACCEPT_LANGUAGE": "ko,ko-KR;q=0.9,und;q=0.8",
    "HTTP_ACCEPT_ENCODING": "gzip, deflate",
    "HTTP_REFERER": "http://test.redinfo.co.kr/",
    "HTTP_ORIGIN": "http://test.redinfo.co.kr",
    "HTTP_USER_AGENT": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36",
    "AuthUserEmail-Value": "test@redinfo.co.kr",
    "AuthUserID": "redinfo",
    "HTTP_X_REQUESTED_WITH": "XMLHttpRequest",
    "HTTP_ACCEPT": "application/json, text/javascript, */*; q=0.01",
    "HTTP_CONNECTION": "keep-alive",
    "HTTP_HOST": "test.redinfo.co.kr"
}

그룹 목록

카테고리 연관글

Comment

댓글작성