웹 애플리케이션 개발 시, 한 도메인에서 수집한 사용자 정보를 다른 도메인의 서버로 전송해야 하는 경우가 자주 발생합니다. 이처럼 서로 다른 출처 간에 데이터를 주고받는 상황을 '크로스 도메인' 요청이라고 하며, 일반적인 AJAX 호출은 브라우저의 보안 정책으로 인해 제한됩니다. 본 문서에서는 jQuery를 이용해 비동기 방식의 크로스 도메인 폼 데이터 전송을 구현하는 방법을 설명합니다.

핵심 기술: JSONP 활용

표준 AJAX 요청은 동일 출처 정책( Same-Origin Policy )에 의해 제한되지만, JSONP (JSON with Padding)는 이를 우회할 수 있는 기법입니다. JSONP는 스크립트 태그를 통해 외부 리소스를 로드하는 방식으로, 서버에서 클라이언트가 지정한 콜백 함수 이름을 포함하여 응답을 반환합니다. 이때, 요청 URL에 callback=? 파라미터를 추가하면, jQuery가 자동으로 임의의 콜백 함수 이름을 생성하고, 서버는 해당 이름을 사용해 결과를 감싸서 응답합니다.

HTML 구성

예제에서는 도메인 www.helloweba.com에서 사용자 입력 폼을 제공하고, demo.helloweba.com 서버로 데이터를 전송한다고 가정합니다. 아래는 간단한 폼 구조입니다.

<form id="userForm" method="post">
  <p><label>이름:</label>
  <input type="text" name="username" class="input" /></p>
  <p><label>성별:</label>
  <input type="radio" name="sex" value="1" checked /> 남자
  <input type="radio" name="sex" value="2" /> 여자</p>
  <p><label>나이:</label>
  <input type="text" name="age" class="input" /></p>
  <p><button type="submit" class="submit-btn">전송</button></p>
</form>

jQuery 처리 로직

폼 제출 이벤트를 감지하고, 폼 데이터를 직렬화한 후 $.getJSON()을 사용해 외부 서버로 요청을 보냅니다. 여기서 중요한 점은 callback=?를 포함한 요청 주소입니다.

$(document).ready(function() {
  $('#userForm').on('submit', function(e) {
    e.preventDefault(); // 기본 제출 막기

    const formData = $(this).serialize();

    $.getJSON('http://demo.helloweba.com/api/jsonp.php?callback=?', formData, function(response) {
      let resultHtml = '';

      if (response && response.username) {
        const gender = response.sex === '1' ? '남자' : '여자';
        resultHtml = `
          <div id="submissionResult" style="margin-top: 15px; padding: 10px; background: #f0f8ff; border: 1px solid #ccc;">
            <strong>전송 성공!</strong><br/>
            이름: ${response.username}<br/>
            성별: ${gender}<br/>
            나이: ${response.age}
          </div>
        `;
      } else {
        resultHtml = '<div style="color: red; margin-top: 10px;">서버 오류 발생. 다시 시도해 주세요.</div>';
      }

      $('#userForm').after(resultHtml);
    }).fail(function() {
      $('#userForm').after('<div style="color: red;">요청 실패. 네트워크 상태를 확인하세요.</div>');
    });
  });
});

서버 측 처리 (PHP 예시)

외부 도메인의 요청을 받기 위해, 서버는 요청 파라미터를 해석하고, 클라이언트가 지정한 콜백 함수 이름을 사용해 응답을 포장해야 합니다.

<?php
header('Content-Type: application/javascript');

$data = [
  'username' => $_GET['username'] ?? '',
  'sex'      => $_GET['sex'] ?? '',
  'age'      => $_GET['age'] ?? ''
];

$callback = $_GET['callback'] ?? 'callback';

echo $callback . '(' . json_encode($data) . ');';
?>

응답 예시:

jsonp1642378901234({"username":"홍길동","sex":"1","age":"30"});

이 문자열은 자바스크립트 실행 컨텍스트에서 자동으로 호출되며, 클라이언트 측 콜백 함수가 실행되어 응답 데이터를 처리할 수 있습니다.

주의사항 및 제한점

• JSONP는 GET 요청만 허용하므로, 대량 데이터 또는 민감 정보 전송에는 부적합합니다.
• 보안상 위험이 있으므로, 신뢰할 수 없는 외부 서버와는 사용하지 않도록 주의해야 합니다.
• 파일 업로드(이미지 등)는 $.getJSON()로는 불가능하며, 별도의 FormData와 XMLHttpRequest 또는 fetch()를 통한 CORS 설정이 필요합니다.