>웹 프론트엔드 >JS 튜토리얼 >크로스 도메인 웹 개발을 사용하는 방법

크로스 도메인 웹 개발을 사용하는 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-04-18 10:00:091652검색

이번에는 크로스 도메인 웹 개발 사용 방법을 알려드리겠습니다. 크로스 도메인 웹 개발 사용 시 주의 사항은 무엇인가요?

웹 개발 과정에서 모든 사람은 크로스 도메인과 접촉하게 됩니다. 많은 사람들은 크로스 도메인이 무엇인지, 웹 개발에서 크로스 도메인을 해결하는 방법을 모릅니다. 다음 기사에서는 이에 대한 자세한 소개를 제공합니다. 관심이 있으시면 교차 도메인 및 교차 도메인 솔루션에 대해 알아 보겠습니다.

크로스 도메인이란 무엇입니까?

개념은 다음과 같습니다. 프로토콜, 도메인 이름, 포트가 다른 한 다른 도메인으로 간주됩니다

다음은 특정 크로스 도메인 상황에 대한 자세한 설명입니다

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 동일한 도메인 이름, 다른 2차 도메인 이름(위와 동일) 허용되지 않음(이 경우 쿠키에 접근할 수 없습니다)
http://www.cnblogs.com/a.js, http://www.a.com/b.js 다양한 도메인 이름 허용되지 않음

1. document.domain 크로스 도메인

원칙: 기본 도메인 이름은 동일하지만 하위 도메인 이름이 다른 페이지의 경우 document.domain을 설정하여 동일한 도메인으로 만들 수 있습니다document.domain让它们同域

限制:同域document提供的是页面间的互操作,需要载入iframe页面

下面几个域名下的页面都是可以通过document.domain跨域互操作的: http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar。 但只能以页面嵌套的方式来进行页面互操作,比如常见的iframe方式就可以完成页面嵌套

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);

上述代码所在的URL是http://a.com/foo,它对http://b.a.com/bar的DOM访问要求后者将 document.domain往上设置一级

// URL http://b.a.com/bar
document.domain = 'a.com'

document.domain只能从子域设置到主域,往下设置以及往其他域名设置都是不允许的, 在Chrome中给出的错误是这样的

Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'baidu.com' is not a suffix of 'b.a.com'

二、有src的标签

原理:所有具有src属性的HTML标签都是可以跨域的,包括,