Ajax로 도메인 간 문제를 해결하는 방법에는 여러 가지가 있습니다.

Ajax에는 도메인 간 문제를 해결하는 세 가지 방법이 있습니다. 1. 프록시를 사용하여 백그라운드를 통해 다른 도메인 이름의 콘텐츠를 얻은 다음 가져온 콘텐츠가 동일한 도메인 이름에 있도록 프런트 엔드에 반환합니다. . JSONP를 사용하세요. 이 메서드는 클라이언트 호출 및 추가 처리를 위해 원격 서버의 js 파일에 데이터를 로드하고 요청 가져오기만 지원합니다. 3. "LHttpRequest 레벨 2"를 사용합니다. 구문은 "header('Access-Control-Allow)입니다. -기원:*')".

이 기사의 운영 환경: windows10 시스템, javascript1.8.5&&html5 버전, Dell G3 컴퓨터.

교차 도메인 ajax

를 해결하는 세 가지 방법이 있습니다. 도메인: 도메인은 WIN2K 네트워크 시스템의 보안 경계입니다. 우리는 컴퓨터 네트워크의 가장 기본적인 단위가 "도메인"이라는 것을 알고 있습니다. 이는 WIN2K에만 있는 것은 아니지만 Active Directory는 하나 이상의 도메인을 통해 실행될 수 있습니다. 독립적인 컴퓨터에서 도메인은 컴퓨터 자체를 의미합니다. 동시에 물리적 위치는 여러 네트워크 세그먼트로 나누어져 있으며 각 도메인에는 고유한 보안 정책이 있습니다. 다른 도메인과의 신뢰 관계와의 관계. 여러 도메인이 신뢰 관계를 통해 연결된 경우 Active Directory는 여러 신뢰 도메인에서 공유될 수 있습니다.

회사에서 다른 도메인 이름으로 요청을 요청하려면 AJAX를 사용해야 하기 때문에 액세스가 거부됩니다. 보안상의 이유로 AJAX는 로컬 리소스에만 액세스할 수 있고 교차 도메인 리소스에는 액세스할 수 없기 때문입니다.

예를 들어 웹사이트 도메인 이름이 aaa.com이고 AJAX를 통해 bbb.com 도메인 이름의 콘텐츠를 요청하려는 경우 브라우저는 이를 안전하지 않은 것으로 간주하여 액세스를 거부합니다.

도메인 간 문제가 발생할 수 있는 몇 가지 상황이 있습니다.

프록시, JSONP 및 XHR2(XMLHttpRequest 레벨 2)의 총 세 가지 솔루션이 요약됩니다.

첫 번째 방법은 프록시입니다: 이 방법은 백엔드(ASP, PHP, JAVA, ASP.NET)를 통해 다른 도메인 이름의 콘텐츠를 얻은 다음 가져온 콘텐츠를 프런트 엔드로 반환하는 것입니다. 동일한 도메인 이름에 있기 때문에 도메인 간 문제가 없습니다.

구현 코드: AJAX 요청을 생성합니다. (페이지 주소는 http://localhost/ajax/proxy.html입니다.)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男");

AJAX 요청을 생성합니다.

proxy.php 코드

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

php 코드를 사용하여 localhost:63342에서 Proxy.js 파일을 얻습니다.

proxy.js 코드

{
name : "吕铭印",
sex : "男"
}

proxy.html 실행 결과

이 시점에서는 프록시를 사용하여 서로 다른 도메인 간의 파일에 액세스합니다.

먼저 AJAX를 사용하여 Proxy.html의 백그라운드에서 Proxy.php 파일에 액세스한 다음, Proxy.php가 요청을 받은 후 localhost:63342의 Proxy.js 파일에 액세스합니다. 프런트 엔드 페이지는 도메인 간 기능을 실현합니다.

여러 크로스 도메인 파일에 액세스하려는 경우 백그라운드 Proxy.php 파일에 액세스하려는 파일의 주소를 매개변수 형식으로 알려줄 수 있습니다.

두 번째 방법 JSONP(GET 요청만 지원): 나중에 사람들은 Js 파일을 호출할 때 도메인 간 영향이 없다는 것을 발견하여 두 번째 솔루션이 파생되었습니다.

클라이언트 호출 및 추가 처리를 위해 데이터를 원격 서버의 js 파일로 로드하는 것입니다.

jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}
jsonp.php
$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})";

구현 원칙: 스크립트 태그를 사용하여 원격 js 파일을 호출하는 것은 크로스 도메인의 영향을 받지 않으므로 스크립트 태그를 생성하고 src 속성을 통해 원격 파일에 액세스할 수 있습니다.

사실 이는 AJAX에 속하지는 않지만 AJAX와 유사한 기능을 구현할 수 있습니다.

세 번째 방법 XMLHttpRequest 레벨 2: HTML5에서 제공하는 XMLHttpRequest 레벨 2는 도메인 간 액세스 및 기타 새로운 기능을 구현했습니다.

이를 위해서는 원격 서버 측에 다음 코드를 추가해야 합니다.

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

이 방법은 기존 방식을 사용하여 클라이언트 AJAX 코드의 메서드이면 충분합니다.

요약: 프록시 구현은 가장 번거롭지만 가장 널리 사용되는 방법입니다. AJAX를 지원하는 모든 브라우저에서 이 방법을 사용할 수 있습니다.

JSONP는 비교적 간단하지만 GET 메서드 호출만 지원합니다.

XHR2는 가장 간단하지만 HTML5만 지원합니다. 모바일 단말용으로 개발하는 경우 XHR2를 사용하도록 선택할 수 있습니다.

【관련 튜토리얼 추천: AJAX 동영상 튜토리얼】

위 내용은 Ajax로 도메인 간 문제를 해결하는 방법에는 여러 가지가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!