js의 도메인 간 문제

不言

풀어 주다： 2018-04-10 13:48:10

원래의

1235명이 탐색했습니다.

이 글은 js의 크로스 도메인 이슈를 소개합니다. 필요하신 분들은 참고하시면 됩니다

샘플 코드는 E/AjaxGGW/크로스 도메인 이슈에 있습니다. , 북마크 너겟을 참조하세요(교차 도메인을 올바르게 직면하세요. 당황하지 마세요)

1 교차 도메인: 브라우저는 다른 웹사이트의 스크립트를 실행할 수 없습니다. 이는 JavaScript2에서 브라우저가 구현한 보안 제한인 브라우저의 Same Origin 정책

으로 인해 발생합니다. 동작:

Cookie, LocalStorage 및 IndexDB를 읽을 수 없습니다.

DOM 및 JS 개체를 얻을 수 없습니다.
Ajax 요청을 보낼 수 없습니다.

공통 크로스 도메인 시나리오
동일 출처: 도메인 이름, 프로토콜, 포트가 동일

http://www.nealyang.cn/index.html

call
http ://www .nealyang.cn/server.php비교차 도메인
Call http:/ /www.neal.cn /server.php Cross-domain, 메인 도메인이 다릅니다
Call http:/ /def.neal.cn/server.php 교차 도메인, 다른 하위 도메인 이름
http://www.nealyang.cn:8080/index.html
Call
http://www. neayang.cn/server.php Cross-domain, 다른 포트
https://www.nealyang.cn/index.html
Call
http://www.nealyang.cn/server .php 교차 도메인, 프로토콜 다름

교차 도메인 솔루션1)

jsonp 교차 도메인

html 페이지해당 태그를 통해 다른 도메인 이름의 정적 리소스 파일을 로드하는 것은 브라우저에서 허용됩니다. 일반적으로 동적으로 스크립트 태그 를 만든 다음 매개변수가 포함된 URL을 요청하여 도메인 간 통신을 달성할 수 있습니다.

그러나 가장 큰 결점은 요청 받기

$(function(){
/*jQuery支持jsonp的实现方式  */
$.ajax({
url:"www.baidu.com",
type:"GET",
dataType:"jsonp",  //请求方式为：jsonp
jsonpCallback:"callback",
data:{
"username":"yaofan"
}
})
})

로그인 후 복사

2)document.domain + iframe 크로스 도메인(1.html 및 document.domain+iframe 크로스 도메인)만 가능하다는 점입니다. html)

가장 중요한 요구 사항은 기본 도메인 이름이 동일해야 한다는 것입니다, 두 개의 html 페이지가 필요합니다

<!-- 这种方式最主要的要求是主域名相同,假设目前a.nealyang.cn和b.nealyang.cn分别对应指定不同的ip服务器
a.nealyang.cn下有一个test.html文件
b.nealyang.cn下有一个1.html文件
  -->
 <p>A页面</p> 
 <!-- 利用iframe加载其他域下的文件 ，src中 -->
<iframestyle = "display:none" name = "iframe1" id = "iframe" src = "http://b.nealyang.cn/1.html" frameborder = "0">
     </iframe>  
     <script type="text/javascript">
     $(function(){
     try{
     document.domain = "nealyang.cn" //将document.domain设置为nealyang.cn，当iframe加载完毕后就可以获取nealyang.cn域下的全局对象
     }catch(e){
     $("#iframe").load(function(){
   var jq = document.getElementById("iframe").contentWindow.$; 
    jq.get("http://nealyang.cn/test.json",function(data){
     console.log(data);
     });
     })
     }
     })
     </script>

로그인 후 복사

3)window.name + iframe 크로스 도메인(origin) .html 및 target.html Nuggets의 )

window.name 속성은 창 이름을 저장하는 문자열을 설정하거나 반환할 수 없습니다. 그녀의 마술은 다른 페이지나 다른 도메인에 로드될 때 이름 값이 여전히 존재한다는 것입니다. 수정 없이는 변경되지 않으며 매우 긴 이름(2MB)을 저장할 수 있습니다.

index 페이지가 원격을 요청한다고 가정합니다. end 서버의 데이터에 대해 페이지 아래에 iframe 태그를 만듭니다. iframe의 src는 서버 파일의 주소를 가리킵니다(iframe 태그 src는 도메인을 넘을 수 있음). 파일을 만든 다음 index.html에서 읽습니다. iframe에서 window.name 값을 가져옵니다.

index.html 페이지의 src와 페이지의 iframe이 다른 소스에서 가져온 경우에는 아무 작업도 수행할 수 없습니다. 프레임. 두 페이지는 서로 다른 도메인에 있고, 이름 값은 동일한 도메인에 있는 페이지에만 표시되므로 원본 페이지는 대상 페이지의 이름 값을 얻을 수 없습니다.

4)Location.hash + iframe 교차 도메인

이 교차 도메인 방법은 위에서 소개한 것과 유사하며 iframe을 동적으로 삽입한 다음 해당 src를 다음과 같이 설정합니다. 서버 주소도 js 코드의 한쪽 끝을 출력하고 하위 창과의 통신을 통해 데이터 전송을 완료합니다.

그리고 location.hash는 실제로 URL의 앵커 포인트입니다. 예를 들어 URL http://www.nealyang.cn#Nealyang을 연 후 콘솔에 location.hash를 입력하면 #Nealyang이 반환됩니다. 필드.

【참고】사실 location.hash와 window.hash는 둘 다 전역 개체 속성을 사용하는 메서드입니다. 그러면 이 두 메서드는 jsop과 동일합니다. 즉, get만 구현할 수 있습니다. 요청

<script type="text/javascript">
function getData(url,fn){
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
iframe.onload = function(){
fn(iframe.contentWindow.location.hash.substring(1));
window.location.hash = "";
document.body.removeChild(iframe);
};
document.body.removeChild(iframe);
}
//get data from server
var url = "http://localhost:8080/data.php";
getData(url,function(data){
var jsondata = JSON.parse(data);
console.log(jsondata.name + "" +jsondata.age);
});
</script>

로그인 후 복사

5)postMessage 크로스 도메인(a.html 및 b.html)

이것은 정보 전송을 위한 postMessage 메소드와 정보 수신 메시지 시간.

① 发送信息的postMessage方法是向外界窗口发送信息

otherWindow.postMessage(message,targetOrigin);

l otherWindow指的是目标窗口，是window.frames属性的成员或者是window.open方法创建的窗口。

l Message是要发送的消息，类型是String、Object

l targetOringin是限定消息接收范围，不限制用星号*

② 接受信息的message事件

var onmessage = function(event){
var data = event.data;
var origin = event.origin;
}
if(typeof window.addEventListener != &#39;undefined&#39;){
    window.addEventListener(&#39;message&#39;,onmessage,false);
}else if(typeof window.attachEvent != &#39;undefined&#39;){
    window.attachEvent(&#39;onmessage&#39;, onmessage);
}

로그인 후 복사

6) 跨域资源共享CORS

目前主流的跨域解决方案

1）简介

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而客服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。