JavaScript的跨域访问问题

文章分享：

详解JS跨域问题
HTTP access control (CORS)
html5 postMessage解决跨域、跨窗口消息传递
跨域与跨域访问

---

一、什么是跨域？

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

二、为什么浏览器要限制跨域访问呢？

原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。

三、跨域的常用方法

1. 跨域资源共享（CORS）

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的

2. JSONP

什么是jsonp？维基百科的定义是：JSONP（JSON with Padding）

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

JSONP实现原理：在js中，我们直接用XMLHttpRequest请求不同域上的数据时是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

// jQuery
<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理获得的json数据
    });
</script>

jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON()方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

// 原生JavaScript
<script type="text/javascript">
    function dosomething(jsondata){
    
        //处理获得的json数据
    }
</script>
<