什么是跨域？
概念：仅仅要协议、域名、port有不论什么一个不同，都被当作是不同的域。（所谓同源是指，域名。协议，port同样。），对于port和协议的不同，仅仅能通过后台来解决。
URL 说明 是否同意通信http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 同意http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同目录 同意http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名，不同port 不同意http://www.a.com/a.jshttps://www.a.com/b.js 同一域名，不同协议 不同意http://www.a.com/a.jshttp://70.32.92.74/b.js 域名和域名相应ip 不同意http://www.a.com/a.jshttp://script.a.com/b.js 主域同样，子域不同 不同意http://www.a.com/a.jshttp://a.com/b.js 同一域名。不同二级域名（同上） 不同意（cookie这样的情况下也不同意訪问）http://www.cnblogs.com/a.jshttp://www.a.com/b.js 不同域名 不同意
1、跨域资源共享（CORS）
CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在訪问跨域资源时，浏览器与server应该怎样沟通。
CORS背后的基本思想就是使用自己定义的HTTP头部让浏览器与server进行沟通。从而决定请求或响应是应该成功还是失败。
server端对于CORS的支持。主要就是通过设置Access-Control-Allow-Origin来进行的。
假设浏览器检測到对应的设置。就能够同意Ajax进行跨域的訪问。
比如：客户端的域名是www.client.com,而请求的域名是www.server.com
在被请求的Response header中增加
- // 指定同意其它域名訪问
- header('Access-Control-Allow-Origin:*');
- // 响应类型
- header('Access-Control-Allow-Methods:POST');
- // 响应头设置
- header('Access-Control-Allow-Headers:x-requested-with,content-type');
就能够实现ajax POST跨域訪问了。
代码例如以下：
client.html 路径：http://www.client.com/client.html
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title> 跨域測试 </title>
- <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
- </head>
- <body>
- <div id="show"></div>
- <script type="text/javascript">
- $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"})
- .done(function(data){
- document.getElementById("show").innerHTML = data.name + ' ' + data.gender;
- });
- </script>
- </body>
- </html>
server.php 路径：http://www.server.com/server.php
- <?php
- $ret = array(
- 'name' => isset($_POST['name'])? $_POST['name'] : '',
- 'gender' => isset($_POST['gender'])?
$_POST['gender'] : '' - );
- header('content-type:application:json;charset=utf8');
- header('Access-Control-Allow-Origin:*');
- header('Access-Control-Allow-Methods:POST');
- header('Access-Control-Allow-Headers:x-requested-with,content-type');
- echo json_encode($ret);
- ?>
Access-Control-Allow-Origin:* 表示同意不论什么域名跨域訪问
假设须要指定某域名才同意跨域訪问，仅仅需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:同意的域名
比如：header('Access-Control-Allow-Origin:http://www.client.com');
假设须要设置多个域名同意訪问。这里须要用php处理一下
比如同意 www.client.com 与 www.client2.com 能够跨域訪问
server.php 改动为
- <?
php
- $ret = array(
- 'name' => isset($_POST['name'])?
$_POST['name'] : '', - 'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
- );
- header('content-type:application:json;charset=utf8');
- $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
- $allow_origin = array(
- 'http://www.client.com',
- 'http://www.client2.com'
- );
- if(in_array($origin, $allow_origin)){
- header('Access-Control-Allow-Origin:'.$origin);
- header('Access-Control-Allow-Methods:POST');
- header('Access-Control-Allow-Headers:x-requested-with,content-type');
- }
- echo json_encode($ret);
- ?>
要解决跨域的问题。我们能够使用下面几种方法：
2、通过jsonp跨域
如今问题来了？什么是jsonp？维基百科的定义是：JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，能够让网页从别的网域要资料。
JSONP也叫填充式JSON，是应用JSON的一种新方法。仅仅只是是被包括在函数调用中的JSON。比如：
callback({ "name","trigkit4"}); JSONP由两部分组成：回调函数和数据。
回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不能够的。可是，在页面上引入不同域上的js脚本文件却是能够的，jsonp正是利用这个特性来实现的。
比如：
callback=dosomething"
></script> js文件加载成功后会运行我们在url參数中指定的函数，而且会把我们须要的json数据作为參数传入。
所以jsonp是须要server端的页面进行对应的配合的。
终于。输出结果为：dosomething(['a','b','c']);
假设你的页面使用jquery，那么通过它封装的方法就能非常方便的来进行jsonp操作了。
,function(jsondata)'
){ //处理获得的json数据 }); </script> jquery会自己主动生成一个全局函数来替换callback=?
中的问号，之后获取到数据后又会自己主动销毁，实际上就是起一个暂时代理函数的作用。$.getJSON方法会自己主动推断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步载入js文件的形式来调用jsonp的回调函数。
JSONP的优缺点
JSONP的长处是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都能够执行。不须要XMLHttpRequest或ActiveX的支持；而且在请求完成后能够通过调用callback的方式回传结果。
JSONP的缺点则是：它仅仅支持GET请求而不支持POST等其他类型的HTTP请求。它仅仅支持跨域HTTP请求这样的情况，不能解决不同域的两个页面之间怎样进行JavaScript调用的问题。
CORS和JSONP对照
CORS与JSONP相比，无疑更为先进、方便和可靠。
1、 JSONP仅仅能实现GET请求，而CORS支持全部类型的HTTP请求。
2、
使用CORS，开发人员能够使用普通的XMLHttpRequest发起请求和获得数据。比起JSONP有更好的错误处理。 3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。 3、通过改动document.domain来跨子域
浏览器都有一个同源策略，其限制之中的一个就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。
不同的框架之间是能够获取window对象的。但却无法获取对应的属性和方法。比方，有一个页面，它的地址是http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 非常显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的： 这个时候，document.domain就能够派上用场了，我们仅仅要把http://www.example.com/a.html 和http://example.com/b.html这两个页面的document.domain都设成同样的域名就能够了。但要注意的是。document.domain的设置是有限制的，我们仅仅能把document.domain设置成自身或更高一级的父域，且主域必须同样。
（1）.在页面 http://www.example.com/a.html 中设置document.domain:
（2）.在页面 http://example.com/b.html 中也设置document.domain:
改动document.domain的方法仅仅适用于不同子域的框架间的交互。
4、使用window.name来进行跨域
window对象有个name属性。该属性有个特征：即在一个窗体(window)的生命周期内,窗体加载的全部的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗体加载过的全部页面中的。
样例：
特将详细实现方法记录例如以下：
如a.com站点想通过JS获取b.com站点的数据。
（1） 在a.com站点加入一个空HTML页。
名称为：http://a.com/null.html
（2） 在a.com站点须要获取数据页面(如：http://a.com/getDomainData.html)内容例如以下：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> < html xmlns="" > < head > < title >跨域获取数据</ title > < script type="text/javascript"> function domainData(url, fn) { var isFirst = true; var iframe = document.createElement('iframe'); iframe.style.display = 'none'; var loadfn = function(){ if(isFirst){ iframe.contentWindow.location = ''; isFirst = false; } else { fn(iframe.contentWindow.name); iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); iframe.src = ''; iframe = null; } }; iframe.src = url; if(iframe.attachEvent){ iframe.attachEvent('onload', loadfn); } else { iframe.onload = loadfn; } document.body.appendChild(iframe); } </ script > </ head > < body > </ body > < script type="text/javascript"> domainData('', function(data){ alert(data); }); </ script > </ html > |
（3） 在b.com中加入获取数据页面 如：http://b.com/data.html 内容需包括：
< script > window.name = '须要跨域传递的数据'; </ script > |
（4） 訪问 http://a.com/getDomainData.html 就可返回 http://b.com/data.html 中的window.name中的数据了。
须要注意的地方
null.html 是必须的。内容可为空。
iframe的onload事件绑定 必须这样写：
if (iframe.attachEvent){ iframe.attachEvent( 'onload' , loadfn); } else { iframe.onload = loadfn; } |
调用domainData函数必须在body后面，或页面载入完后。
调用时会运行 http://b.com/data.html 页面的脚本。
5、使用HTML5的window.postMessage方法跨域
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，能够使用它来向其他的window对象发送消息。不管这个window对象是属于同源或不同源，眼下IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。