js_javascript 기술로 도메인 간 액세스를 달성하는 세 가지 방법
- WBOY원래의
- 2016-05-16 15:26:511652검색
Javascript 교차 도메인 액세스는 웹 개발자가 자주 직면하는 문제입니다. 교차 도메인이란 무엇입니까? 한 도메인에 로드된 스크립트는 다른 도메인의 문서 속성을 얻거나 작동합니다. 아래에는 JavaScript 교차 도메인을 구현하는 세 가지 방법이 나열되어 있습니다. :
1. iframe 기반 크로스 도메인 구현
iframe 기반 교차 도메인 구현을 위해서는 두 도메인이 aa.xx.com, bb.xx.com의 특성을 가져야 합니다. 즉, 두 페이지가 기본 도메인에 속해야 합니다(예: xxx. com 또는 xxx .com.cn) 동일한 프로토콜(예: 둘 다 http)과 동일한 포트(예: 둘 다 80)를 사용합니다. 이런 방식으로 document.domain을 두 페이지에 동시에 추가합니다. 하위 페이지를 호출하는 상위 페이지의 기능을 구현할 수 있습니다.
페이지 1:
<html>
<head>
<script>
document.domain = "xx.com";
function aa(){
alert("p");
}
</script>
</head>
<body>
<iframe src="http://localhost:8080/CmsUI/2.html" id="i">
</iframe>
<script>
document.getElementById('i').onload = function(){
var d = document.getElementById('i').contentWindow;
d.a();
};
</script>
</body>
</html>
2페이지:
<html>
<head>
<script>
document.domain = "xx.com";
function a(){
alert("c");
}
</script>
</head>
<body>
</body>
</html>
이때 상위 페이지는 하위 페이지의 함수를 호출하여 js 교차 도메인 액세스를 달성할 수 있습니다.
2. 스크립트 태그 기반 크로스 도메인 구현
스크립트 태그 자체는 다른 도메인의 리소스에 액세스할 수 있으며 브라우저의 동일 출처 정책에 의해 제한되지 않습니다. 코드는 다음과 같습니다.
var script = document.createElement('script');
script.src = "http://aa.xx.com/js/*.js";
document.body.appendChild(script);
이렇게 하면 스크립트 태그를 동적으로 생성하여 다른 도메인의 js 파일을 로드할 수 있으며, 로드된 js 파일의 기능을 이 페이지를 통해 호출할 수 있습니다. 이 방법의 단점은 다른 도메인의 문서를 로드할 수 없다는 것입니다. jsonp는 이렇게 구현되는데, jsonp는 콜백 매개변수를 다른 도메인에 전달하고, 다른 도메인의 백그라운드를 통해 콜백 매개변수 값과 json 문자열을 패키징하여 반환하기 때문이다. 스크립트 태그, 브라우저 반환된 문자열은 JavaScript에 따라 구문 분석 및 실행되어 도메인 간 데이터 전송을 실현합니다.
jquery의 jsonp 지원도 이 솔루션을 기반으로 합니다.
3.백엔드 프록시 방식
이 방법은 모든 도메인 간 문제를 해결할 수 있습니다. 즉, 백엔드를 프록시로 사용하고 다른 도메인에 대한 각 요청이 이 도메인의 백엔드로 전송되며, 이 도메인의 백엔드는 http 요청을 시뮬레이션하여 다른 도메인에 액세스합니다. 그런 다음 반환된 결과를 반환합니다. 프런트 데스크의 경우 액세스되는 문서든 js 파일이든 교차 도메인이 가능하다는 이점이 있습니다.
JS에서 크로스 도메인 액세스를 달성하는 위의 세 가지 방법이 먼저 제공됩니다. 주의 깊게 공부하고 공부하면 확실히 뭔가를 얻을 수 있습니다