크로스 도메인 js(그림 ping, JSONP 및 CORS)를 달성하기 위한 여러 방법 요약_javascript 기술

교차 도메인

동일 출처 정책이 있지만 document.domain, window.name, image ping, jsonp 및 CORS를 포함하여 js에서는 여전히 교차 도메인이 매우 일반적입니다. CORS 준비는 잊어버리세요.

사진핑

모든 URL에서 이미지를 로드할 수 있으므로 img의 src를 다른 도메인의 URL로 설정하면 onload 및 onerror 이벤트를 사용하여 응답 수신 여부를 확인할 수 있습니다.

var img=new Image();
img.src='http://www.jb51.net';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

여기서 새로운 img 객체가 생성됩니다. 제공된 URL은 오류 이벤트이므로 URL이 이미지 http://images.jb51로 변경되면 오류가 발생합니다. net//710118 /o_MacBook Air.png, 온로드 로딩 성공 정보가 팝업되어 간단한 크로스 도메인이 달성됩니다.

도메인 간 이미지 핑을 사용하면 가져오기 요청만 보낼 수 있으며 응답 텍스트에 액세스할 수는 없습니다. 응답이 있는지 여부만 모니터링할 수 있으며 이는 광고 클릭을 추적하는 데 사용할 수 있습니다.

jsonp

jsonp는 콜백 함수 콜백이 포함된 json입니다. 원래 이름은 패딩된 json과 매개변수 json으로 번역됩니다.

스크립트의 src는 도메인을 넘을 수 있으므로 전송된 URL 뒤에 콜백 매개변수를 추가하여 서버에 전달합니다. 그러면 서버에서 반환된 데이터가 콜백의 매개변수로 사용됩니다. 우리 스스로 처리를 위해 json 데이터를 받을 수 있습니다.

간단한 코드는 다음과 같습니다.

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/&#63;callback=call'></script>

여기서 스크립트의 src를 사용자의 IP 주소를 얻기 위한 API인 http://freegeoip.net/json/?callback=call으로 설정했습니다. 보려면 여기를 클릭하세요.) 그런 다음 콜백을 URL의 매개변수로 연결하면 반환된 json 데이터가 콜백의 매개변수로 사용됩니다. 여기서는 콜백을 호출 함수로 정의합니다. 즉, 반환된 json 데이터는 다음과 같습니다. 호출의 매개변수로 전달됩니다. 이 호출 기능은 사용자의 도시만 팝업합니다. 여기서 출력 결과는 허베이입니다. 기타 IP 정보는 국가명, 시간대 등 자세한 목록이 있는 공식 홈페이지에서 확인하실 수 있습니다.

CORS(교차 자원 공유)

CORS는 사이트 간 리소스 공유입니다. IE의 경우 xdr 개체인 XDomainRequest가 인스턴스화됩니다. 트리거되는 이벤트는 로드 및 오류입니다. 방법은 xhr과 거의 동일하며 열기 및 보내기도 필요합니다.

ff 및 chrome과 같은 다른 브라우저의 경우 xhr이 인스턴스화됩니다. 여기서 myvin은 xhr만 사용하여 브라우저 간 호환성을 달성하려는 경우 xdr과 협력할 수 있습니다.

xhr은 다음과 같습니다.

var xhr=new XMLHttpRequest();   
var url="http://www.jb51.net";
xhr.open('GET', url); 
xhr.send(null);

여기에서 사용된 URL은 http://www.jb51.net입니다. ajax와 유일한 차이점은 해당 URL이 ajax에서 사용되는 이 페이지 내 상대 주소를 사용한다는 것입니다. 주소 또는 절대 주소.

콘솔을 보면 여기서는 ff40.0.3을 사용하고 표시되는 정보는 다음과 같습니다.

교차 출처 요청 차단됨: 동일 출처 정책은 http://www.jb51.net에서 원격 리소스를 읽는 것을 금지합니다. (원인: CORS 헤더 'Access-Control-Allow-Origin'이 누락되었습니다.)

따라서 CORS를 사용하여 교차 도메인을 구현하려면 서버 측에서 Access-Control-Allow-Origin을 설정하는 단계가 하나 더 있습니다.