JSONP를 사용하지 않는 한 AJAX가 도메인 간 HTML을 로드하지 못하는 이유는 무엇이며 이를 어떻게 해결할 수 있습니까?

AJAX를 사용하여 교차 도메인 엔드포인트 로드

문제:

다음을 사용하여 교차 도메인 HTML 페이지를 로드하는 데 어려움이 있습니다. dataType이 "jsonp"로 설정되지 않은 경우 AJAX입니다. JSONP를 사용하는 경우에도 브라우저는 스크립트 MIME 유형을 예상하지만 대신 "text/html"을 수신합니다.

해결책 1: 타사 프록시 활용

보안으로 인해 사용자 데이터를 추적하는 제3자 프록시에 대한 우려가 있으므로 개인 정보와 함께 사용하는 것은 권장되지 않습니다. 그러나 공개 데이터 시나리오에는 적합할 수 있습니다.

다음 프록시 옵션을 고려하세요.

• CORS Anywhere: 프록시된 요청에 CORS 헤더를 자동으로 추가합니다.

$.ajaxPrefilter(function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
  }
});

• 어쨌든 원본: 도메인 간 JSONP 액세스를 용이하게 합니다.

$.ajaxSetup({
  scriptCharset: "utf-8",
  contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' +
  encodeURIComponent('http://google.com') + '&callback=?',
  function (data) {
    console.log("> ", data);
    $("#viewer").html(data.contents);
  }
);

• CORS 프록시: 모든 웹사이트에 대한 CORS 요청을 단순화합니다.

$.get(
  'http://www.corsproxy.com/' +
  'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
  function (response) {
    console.log("> ", response);
    $("#viewer").html(response);
  }
);

해결책 2: 백엔드 구축 프록시

가장 안전한 접근 방식은 백엔드에 프록시를 생성하여 도메인 간 문제를 해결하는 것입니다.

위 내용은 JSONP를 사용하지 않는 한 AJAX가 도메인 간 HTML을 로드하지 못하는 이유는 무엇이며 이를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!