개념: 프로토콜, 도메인 이름, 포트가 다른 한 다른 도메인으로 간주됩니다.
URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.js 同一域名,不同协议 不允许 http://www.a.com/a.js http://70.32.92.74/b.js 域名和域名对应ip 不允许 http://www.a.com/a.js http://script.a.com/b.js 主域相同,子域不同 不允许 http://www.a.com/a.js http://a.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问) http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 不允许
포트와 프로토콜의 차이는 백그라운드를 통해서만 해결될 수 있습니다.
CORS(Cross-Origin Resource Sharing
) 교차 도메인 리소스 공유는 교차 도메인 리소스에 액세스할 때 브라우저와 서버가 통신해야 하는 방법을 정의합니다. CORS
의 기본 아이디어는 사용자 정의 HTTP 헤더를 사용하여 브라우저가 서버와 통신하여 요청이나 응답이 성공할지 실패할지 여부를 결정하도록 하는 것입니다.
<script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open("GET", "/trigkit4",true); xhr.send(); </script>
위 trigkit4
는 상대 경로입니다. CORS
을 사용하려는 경우 관련 Ajax
코드는 다음과 같습니다.
<script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true); xhr.send(); </script>
코드의 차이점은 다음과 같습니다. 이전 경로는 상대 경로입니다. 도메인 간에 액세스하려는 인터페이스 주소인 다른 도메인의 절대 경로로 바꾸십시오.
CORS
에 대한 서버 측 지원은 주로 Access-Control-Allow-Origin
설정을 통해 이루어집니다. 브라우저가 해당 설정을 감지하면 Ajax 도메인 간 액세스를 허용할 수 있습니다.
교차 도메인 문제를 해결하려면 다음 방법을 사용할 수 있습니다.
이제 문제가 발생할까요? jsonp
이란 무엇인가요? Wikipedia의 정의는 다음과 같습니다. JSONP(JSON with Padding)
은 웹 페이지가 다른 도메인의 데이터를 요청할 수 있도록 하는 데이터 형식 JSON
의 "사용 모드"입니다.
JSONP
패딩 JSON이라고도 하며 JSON을 적용하는 새로운 방법으로 함수 호출에 포함된 JSON일 뿐입니다. 예:
callback({"name","trigkit4"});
JSONP는 두 부분으로 구성됩니다. 콜백 함수 그리고 데이터. 콜백 함수는 응답이 올 때 페이지에서 호출되어야 하는 함수이고, 데이터는 콜백 함수에 전달되는 JSON 데이터입니다.
js에서는 XMLHttpRequest
을 사용하여 다른 도메인의 데이터를 직접 요청할 수 없습니다. 그러나 페이지의 다른 도메인에서 js 스크립트 파일을 도입하는 것이 가능합니다. jsonp는 이를 달성하기 위해 이 기능을 사용합니다. 예:
<script type="text/javascript"> function dosomething(jsondata){ //处理获得的json数据 } </script> <script src="http://example.com/data.php?callback=dosomething"></script>
js 파일이 성공적으로 로드된 후 url 매개변수에 지정한 함수가 실행되고 필요한 json 데이터가 매개변수로 전달됩니다. 따라서 jsonp에는 서버 측 페이지의 해당 협력이 필요합니다.
<?php $callback = $_GET['callback'];//得到回调函数名 $data = array('a','b','c');//要返回的数据 echo $callback.'('.json_encode($data).')';//输出 ?>
마지막으로 출력 결과는 다음과 같습니다. dosomething(['a','b','c']);
페이지에서 jquery를 사용하는 경우 캡슐화 방법을 통해 jsonp 작업을 쉽게 수행할 수 있습니다.
<script type="text/javascript"> $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){ //处理获得的json数据 }); </script>
jquery
는 callback=?
의 물음표를 대체하는 전역 함수를 자동으로 생성한 다음 데이터를 얻은 후 자동으로 삭제합니다. 실제로는 임시 프록시 함수 역할을 합니다. $.getJSON
메소드는 크로스 도메인인지 여부를 자동으로 확인합니다. 크로스 도메인이 아닌 경우 일반 ajax
메소드를 호출합니다. 크로스 도메인인 경우 jsonp
의 콜백 함수를 호출합니다. js 파일의 비동기 로딩 형식입니다.
JSONP의 장점은 다음과 같습니다. XMLHttpRequest
객체에 의해 구현된 Ajax 요청과 같이 동일한 출처 정책에 의해 제한되지 않으며 호환성이 더 좋습니다. 더 오래되었습니다. 모든 브라우저에서 실행될 수 있으며 XMLHttpRequest 또는 ActiveX 지원이 필요하지 않으며 요청이 완료된 후 콜백을 호출하여 결과를 반환할 수 있습니다.
JSONP의 단점은 GET 요청만 지원하고 POST와 같은 다른 유형의 HTTP 요청은 지원하지 않으며 도메인 간 HTTP 요청만 지원하고 서로 다른 도메인에 있는 두 페이지 간의 문제를 해결할 수 없다는 것입니다. JavaScript
전화를 걸고 있어요.
CORS는 의심의 여지 없이 JSONP보다 더 발전하고 편리하며 안정적입니다.
1. JSONP는 GET 요청만 구현할 수 있는 반면 CORS는 모든 유형의 HTTP 요청을 지원합니다.
2. 개발자는 CORS를 사용하여 일반 XMLHttpRequest를 사용하여 요청을 시작하고 데이터를 얻을 수 있으며 이는 JSONP보다 오류 처리가 더 좋습니다.
3. JSONP는 주로 CORS를 지원하지 않는 오래된 브라우저에서 지원되지만 대부분의 최신 브라우저는 이미 CORS를 지원합니다.
브라우저에는 모두 동일 출처 정책이 있으며, 그 제한 사항 중 하나는 첫 번째 방법에서는 ajax 메서드를 전달할 수 없다는 점입니다. 다양한 소스로부터 문서를 요청하세요. 두 번째 제한은 js가 브라우저의 다른 도메인에 있는 프레임 간에 상호 작용할 수 없다는 것입니다.
다양한 프레임워크는 창 개체를 얻을 수 있지만 해당 속성과 메서드를 얻을 수는 없습니다. 예를 들어, 주소가 http://www.php.cn/
인 페이지가 있습니다. 이 페이지에는 iframe
이 있고 해당 페이지의 src는 http://www.php.cn/
입니다. 따라서 이 페이지와 그 안의 iframe
프레임은 서로 다른 도메인에 있습니다. iframe
페이지에 js 코드를 작성하여
<script type="text/javascript"> function test(){ var iframe = document.getElementById('ifame'); var win = document.contentWindow;//可以获取到iframe里的window对象,但该window对象的属性和方法几乎是不可用的 var doc = win.document;//这里获取不到iframe里的document对象 var name = win.name;//这里同样获取不到window对象的name属性 } </script> <iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
这个时候,document.domain
就可以派上用场了,我们只要把http://www.php.cn/
和 http://www.php.cn/
这两个页面的document.domain都设成相同的域名就可以了。但要注意的是,document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。
1.在页面 http://www.php.cn/
中设置document.domain
:
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe> <script type="text/javascript"> document.domain = 'example.com';//设置成主域 function test(){ alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象 } </script>
2.在页面 http://www.php.cn/
中也设置document.domain
:
<script type="text/javascript"> document.domain = 'example.com';//在iframe载入这个页面也设置document.domain,使之与主页面的document.domain相同 </script>
修改document.domain
的方法只适用于不同子域的框架间的交互。
window
对象有个name
属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name
的,每个页面对window.name
都有读写的权限,window.name
是持久存在一个窗口载入过的所有页面中的
window.postMessage(message,targetOrigin)
方法是html5
新引进的特性,可以使用它来向其它的window
对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera
等浏览器都已经支持window.postMessage
方法。
以上就是JavaScript跨域问题代码总结的内容,更多相关内容请关注PHP中文网(www.php.cn)!