jQuery Academy · 강의

도메인 간 AJAX(CORS/JSONP)

JSONP를 사용하거나 서버에서 CORS 헤더를 구성해 도메인 간 AJAX 요청을 보내고 안전하게 데이터를 교환하는 방법을 이해하고 적용합니다.

도메인 간 AJAX(CORS/JSONP)은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

도메인 간 AJAX: 과제

웹사이트에서 다른 웹사이트의 데이터를 가져오려고 할 때 이를 도메인 간 AJAX 요청이라고 합니다. 이는 처리하기 까다로운 경우가 많습니다!

기본적으로 웹 브라우저에는 웹페이지가 자신이 시작된 도메인과 다른 도메인으로 요청을 보내지 못하게 하는 보안 규칙이 있습니다. 이 규칙은 데이터를 보호합니다.

동일 출처 정책 이해하기

앞에서 언급한 보안 규칙을 동일 출처 정책(SOP)이라고 합니다. 이는 브라우저의 기본적인 보안 기능입니다.

SOP에 따르면 웹 브라우저는 첫 번째 웹페이지에 포함된 스크립트가 두 번째 웹페이지의 데이터에 접근하도록 허용할 때 두 웹페이지의 출처(도메인, 프로토콜, 포트)가 동일한 경우에만 허용합니다.

예: mywebsite.com의 페이지는 api.anotherdomain.com에서 직접 데이터를 가져올 수 없습니다.

CORS: 현대적인 해결 방법

도메인 간 요청을 안전하게 허용하기 위해 웹 커뮤니티는 Cross-Origin Resource Sharing (CORS)을 개발했습니다. 이는 이를 처리하는 현대적인 표준 방법입니다.

CORS는 서버가 특정 다른 도메인이 자신의 리소스에 접근해도 괜찮다는 사실을 브라우저에 명시적으로 알리도록 합니다.

CORS: 서버 측 구성

CORS는 주로 데이터를 제공하는 서버에서 구성합니다. 서버는 어떤 출처가 허용되는지 나타내는 특수 HTTP 헤더를 응답에 포함해 보냅니다.

핵심 헤더는 Access-Control-Allow-Origin입니다. 이 헤더는 어떤 도메인이 리소스에 접근할 수 있는지 지정합니다.

Access-Control-Allow-Origin: * (모든 도메인 허용)
Access-Control-Allow-Origin: https://yourdomain.com (특정 도메인 하나만 허용)

CORS: jQuery 클라이언트 요청

클라이언트 측에서 jQuery를 사용해 CORS 요청을 보내는 방법은 서버가 올바르게 구성되어 있다면 일반 AJAX 요청과 크게 다르지 않습니다.

jQuery가 브라우저 수준의 통신을 처리하므로, $.ajax() 호출에서 도메인 간 URL을 지정하기만 하면 됩니다.

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS: 프리플라이트 요청(OPTIONS)

특정 "복잡한" CORS 요청의 경우 브라우저는 실제 요청을 보내기 전에 프리플라이트 요청을 수행합니다. 이는 추가적인 보안 단계입니다.

프리플라이트 요청은 OPTIONS HTTP 메서드를 사용하여 서버에 권한을 요청합니다. 서버가 이를 허용하면 브라우저는 실제 요청을 보냅니다(예: PUT, DELETE 또는 사용자 지정 헤더가 포함된 요청).

JSONP: 오래된 대안

CORS가 널리 사용되기 전에는 특히 오래된 브라우저나 API에서 도메인 간 요청을 처리하는 일반적인 우회 방법으로 JSONP (JSON with Padding)를 사용했습니다.

JSONP는 모든 도메인에서 <script> 태그를 불러올 수 있도록 브라우저가 허용한다는 점을 창의적으로 활용하여 동일 출처 정책을 우회합니다.

JSONP: 작동 방식

JSONP는 다음과 같이 작동합니다.

동적으로 <script> 태그를 만들고 src를 도메인 간 URL로 설정합니다.
JSONP 요청을 예상한 서버는 JSON 데이터를 함수 호출로 감쌉니다(이 부분이 '패딩'입니다).
브라우저는 이 스크립트를 실행하고, 데이터를 인수로 전달하여 페이지에 전역으로 정의된 함수를 호출합니다.

JSONP: jQuery 구현

jQuery를 사용하면 JSONP를 훨씬 간단하게 구현할 수 있습니다. $.ajax() 호출에서 dataType: "jsonp"를 지정하기만 하면 됩니다.

jQuery가 동적 <script> 태그 생성, 고유한 콜백 함수 이름 생성, 응답 도착 시 콜백 실행을 자동으로 처리합니다.

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS와 JSONP: 주요 차이점

둘 다 도메인 간 문제를 해결하지만 CORS와 JSONP에는 서로 다른 특징이 있습니다.

CORS: 현대적인 표준이며 HTTP 헤더를 사용하고 안전합니다. 모든 HTTP 메서드를 지원하지만 서버 측 구성이 필요합니다.
JSONP: 오래된 우회 방법이며 <script> 태그를 사용합니다. 보안성이 낮고 GET 요청만 지원하는 클라이언트 측 기법이며, 서버가 응답을 감싸서 보내야 합니다.

빠른 확인: 도메인 간 요청

다음 중 도메인 간 AJAX 요청에 관한 설명으로 TRUE인 것은 무엇입니까?

복습: 도메인 간 요청 마스터하기

도메인 간 AJAX 요청에서 동일 출처 정책을 우회하는 방법을 배웠습니다!

CORS는 권한을 위해 서버 측 HTTP 헤더를 사용하는 현대적이고 안전한 표준입니다.
JSONP는 동적 <script> 태그를 사용하여 GET 요청을 처리하는 오래되고 보안성이 낮은 우회 방법입니다.

가능하면 항상 CORS를 우선 사용하십시오. 더 안전하고 유연하기 때문입니다. JSONP는 주로 레거시 시스템이나 특정 상황에서 사용합니다.

자주 묻는 질문

“도메인 간 AJAX(CORS/JSONP)” 강의는 무료인가요?

네 — “도메인 간 AJAX(CORS/JSONP)” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“도메인 간 AJAX(CORS/JSONP)”에서 뭘 배우나요?

JSONP를 사용하거나 서버에서 CORS 헤더를 구성해 도메인 간 AJAX 요청을 보내고 안전하게 데이터를 교환하는 방법을 이해하고 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.

“도메인 간 AJAX(CORS/JSONP)” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기