현재 위치: > 최신 기사 목록> 크로스 도메인 요청을 구현하는 두 가지 방법 : JSONP 및 CORS 상세한 설명

크로스 도메인 요청을 구현하는 두 가지 방법 : JSONP 및 CORS 상세한 설명

gitbox 2025-06-15

1. 크로스 도메인 데이터 전송의 배경

크로스 도메인 데이터 요청은 현대 프론트 엔드 개발에서 일반적인 요구 사항입니다. 브라우저의 보안 정책 제한으로 인해이 페이지는 다른 도메인 이름, 프로토콜 또는 포트에서 데이터를 직접 얻을 수 없으며, 도메인 간 통신은 해결해야 할 긴급한 문제가되었습니다. 이 기사는 PHP 언어를 중심으로 두 개의 주류 교차 도메인 전송 솔루션의 구현 방법을 소개합니다.

2. 동일한 원천 전략을 이해하십시오

"동일한 원래 정책"은 보안을 보장하기 위해 브라우저에서 사용하는 중요한 메커니즘입니다. 서버 리소스에 정상적으로 액세스하려면 페이지의 프로토콜, 도메인 이름 및 페이지 포트가 현재 페이지와 일치해야합니다. 예를 들어, 페이지 주소가 http://www.example.com/index.html이면 :

  • 프로토콜은 HTTP 여야합니다
  • 도메인 이름은 www.example.com이어야합니다
  • 포트는 기본 80 여야합니다 (포트가 선언되지 않은 경우)

3. 크로스 도메인 요청에 JSONP를 사용하십시오

JSONP (패딩이있는 JSON)는 스크립트 태그를 기반으로하는 크로스 도메인 데이터 수집 방법입니다. 스크립트 태그는 동일한 오리핀 정책에 의해 제한되지 않기 때문에 다른 도메인 이름의 데이터를 요청한 다음 콜백 함수를 통해 리턴 값을 얻는 데 사용할 수 있습니다.

 <script type="text/javascript">
    function jsonpCallback(data){
        alert(data);
    }
</script>
<script type="text/javascript" src="http://www.domain2.com/data.php?callback=jsonpCallback"></script>

서버 측의 PHP 코드는 다음과 같습니다.

 <?php
$data = array('name' => 'Q.syr', 'age' => 24);
echo $_GET['callback'] . '(' . json_encode($data) . ')';
?>

이 방법은 GET 요청 만 지원하며 사용하기 쉽지만 XSS 공격의 위험과 같은 보안 위험도 있습니다.

4. Cors 교차 도메인 자원 공유 정책

CORS (Cross-Origin 자원 공유)는 W3C에 의해 공식화 된 표준입니다. 서버는 응답 헤더를 설정하여 리소스에 액세스 할 수있는 도메인 이름을 선언 할 수 있습니다. 현재보다 안전하고 일반적인 크로스 도메인 처리 방법입니다.

4.1 PHP는 CORS 응답 헤더를 구현합니다

 header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Headers:x-requested-with,content-type');

설명 :

  • Access-Control-Ollow-Origin : 액세스 할 수있는 소스는 모든 도메인에 액세스 할 수 있음을 의미합니다 .
  • 액세스 제어 획기 방법 : 허용 HTTP 방법
  • Access-Control-Hallow-Headers : 허용 요청 헤더 필드

4.2 프론트 엔드는 xmlhttprequest를 사용하여 크로스 도메인 요청을 구현합니다

 var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var responseText = xmlhttp.responseText;
        console.log(responseText);
    }
}
xmlhttp.open('GET', 'http://www.domain2.com/data.php', true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send();

이 방법은 여러 HTTP 방법을 지원하며 매우 안전하지만 백엔드는 응답 헤더 설정과 협력해야합니다.

5. JSONP와 CORS의 비교

두 가지 방법에는 고유 한 특성이 있습니다.

  • JSONP : 구현은 간단하고 서버 구성이 필요하지 않으며 요청 만 지원합니다. 보안 위험이 있습니다.
  • CORS : 표준 방법은 보안이 높은 여러 요청 유형 및 인증 메커니즘을 지원합니다. 백엔드 응답 헤더 구성이 필요합니다.

6. 요약

이 기사는 PHP가 Cross-Domain Communication-JSONP 및 CORS를 구현하기위한 심층적 인 두 가지 주류 솔루션을 설명합니다. 개발자는 프로젝트의 실제 요구, 브라우저 호환성, 보안 및 기타 요인에 따라 가장 적절한 구현 방법을 선택할 수 있습니다. 보안 및 유연성을 추구하는 경우 CORS 크로스 도메인 처리 방법에 우선 순위를 부여하는 것이 좋습니다.