HTML 엔드포인트를 로드할 때 도메인 간 AJAX 요청을 어떻게 해결할 수 있습니까?

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

CORS(Cross-Origin Resource Sharing)는 웹 브라우저가 다른 도메인의 리소스에 요청할 수 있도록 하는 프로토콜입니다. 그러나 이 기능의 악의적인 사용을 방지하기 위해 몇 가지 제한 사항이 있습니다.

문제

AJAX를 사용하여 도메인 간 HTML 페이지를 로드하려고 하면 dataType이 다음과 같은 경우가 아니면 문제가 발생할 수 있습니다. "jsonp"로 설정합니다. 그러나 JSONP를 사용하면 브라우저는 스크립트 MIME 유형을 기대하지만 대신 "text/html"을 수신합니다. 또한, crossDomain 매개변수를 사용해도 문제가 해결되지 않았습니다.

해결책

도메인 간 장벽을 극복하기 위한 몇 가지 접근 방식이 있습니다:

JSONP

JSONP(JSON with Padding)는 응답을 함수 호출로 래핑하여 도메인 간 AJAX 요청을 허용하는 기술입니다. 이는 dataType 매개변수를 "jsonp"로 설정하고 콜백 함수를 성공 핸들러로 제공함으로써 달성할 수 있습니다.

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

CORS 프록시

CORS 프록시는 다음 작업에 사용할 수 있는 중간 서버입니다. 동일 출처 정책을 우회합니다. 브라우저가 다른 도메인의 리소스에 액세스할 수 있도록 요청에 필요한 헤더를 추가합니다. 평판이 좋은 여러 CORS 프록시 서비스를 온라인에서 사용할 수 있습니다.

$.ajax({
  type: "GET",
  url: "https://cors-proxy.com/crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

CORS Anywhere

CORS Anywhere는 모든 도메인에서 리소스를 가져오는 데 사용할 수 있는 인기 있는 CORS 프록시 서버입니다.

$.ajaxPrefilter(function(options) {
  if (options.crossDomain && $.support.cors) {
    options.url = "https://cors-anywhere.herokuapp.com/" + options.url;
  }
});

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

Whatever Origin

Whatever Origin은 JSONP를 사용하여 활성화하는 오픈 소스 라이브러리입니다. 교차 도메인 요청.

$.ajax({
  type: "GET",
  url: "http://whateverorigin.org/get?url=" + encodeURIComponent("crossdomainendpoint.com"),
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

이러한 기술은 교차 도메인 제한을 극복하는 데 도움이 될 수 있지만 외부 리소스로 작업할 때 보안 영향을 고려하고 동일 원본 정책 원칙을 준수하는 것이 중요합니다.

위 내용은 HTML 엔드포인트를 로드할 때 도메인 간 AJAX 요청을 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!