JSONP는 교차 출처 요청 문제를 어떻게 해결합니까?

JSONP를 사용한 교차 출처 요청: 실제 예

교차 출처 정책 제한이 발생할 경우 JSONP(JSON with Padding)가 편리한 솔루션을 제공합니다. 그러나 세부 사항은 처음에 파악하기가 혼란스러울 수 있습니다. 간단한 jQuery, PHP 및 JSONP 예제를 통해 프로세스를 이해해 보겠습니다.

Cross-Origin 요청을 위한 JSONP 구현

다음과 같은 잘못된 코드 조각을 고려하세요.

// jQuery
$.post('http://MySite.com/MyHandler.php', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res);
});

// PHP
<?php $fname = $_POST['firstname'];
if ($fname == 'Jeff') {
  echo 'Jeff Hansen';
}
?>

교차 출처 요청을 활성화하기 위해 JSONP를 활용하겠습니다. 방법은 다음과 같습니다.

jQuery:

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res.fullname);
});

PHP:

<?php $fname = $_GET['firstname'];
if ($fname == 'Jeff') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({' . "'fullname' : 'Jeff Hansen'" . '})';
}
?>

키 포인트:

• ?callback=?: 이 매개변수는 서버에 콜백 함수 이름을 JSON 응답에 추가하도록 지시합니다.
• res.fullname: JavaScript에서는 점 표기법을 사용하여 속성 값에 액세스합니다. 하지만 이 경우 응답을 JSON 개체로 처리하기 위해 앞에 추가해야 합니다.

JSONP 응답에서 HTML 반환

예, JSONP 응답에 HTML을 저장할 수 있습니다. PHP 코드를 다음과 같이 수정하세요.

<?php if ($fname == 'Jeff') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({
    'name': 'Jeff Hansen',
    'html': '<span>This is some HTML'
  })';
}
?>

JavaScript에서는 res.html을 사용하여 HTML에 액세스할 수 있습니다.

위 내용은 JSONP는 교차 출처 요청 문제를 어떻게 해결합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!