2018-08-10js跨域深入

参考出处
http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
https://blog.csdn.net/u014607184/article/details/52027879
https://segmentfault.com/a/1190000000718840
https://www.cnblogs.com/roam/p/7520433.html
http://www.cnblogs.com/2050/p/3191744.html

跨域
http:6080://www.arcgis.com/index.html
协议 端口 域名

方法

1. 使用proxy代理

c# asp.net继承IhttpHandler实现

2. jsonp

jsonp实现模式 CallBack

创建一个回调函数，然后在远程服务上调用这个函数并将JSON数据形式作为参数传递，完成回调

jquery对jsonp的实现：$.getJSON(url,[data],[callback])

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
alert(data.name + " is a a" + data.sex);
});
</script>

ajax对jsonp的实现

$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('状态为：' + status + ',状态是：' + xhr.statusText);
console.log(response);
}
});

3. 跨域资源共享（CORS）

自定义头Access-Control-Origin:''来允许跨域访问

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

// IE8/9需window.XDomainRequest兼容
var xhr = new XMLHttpRequest();
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};

4. window.name+iframe

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。
不细究

5. 使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin)

image.png