js跨域解决方式

什么是跨域？

概念：仅仅要协议、域名、port有不论什么一个不同，都被当作是不同的域。（所谓同源是指，域名。协议，port同样。），对于port和协议的不同，仅仅能通过后台来解决。

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     同一域名，不同port  不同意

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 同一域名。不同二级域名（同上） 不同意（cookie这样的情况下也不同意訪问）

http://www.cnblogs.com/a.js

http://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中增加

[php] view
plain copy

// 指定同意其它域名訪问
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

[html] view
plain copy

<!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] view
plain copy

<?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] view
plain copy

<?

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正是利用这个特性来实现的。

比如：

<script type="text/javascript">

    function dosomething(jsondata){

        //处理获得的json数据

    }

</script>

<script src="http://example.com/data.php?

callback=dosomething"></script>

js文件加载成功后会运行我们在url參数中指定的函数，而且会把我们须要的json数据作为參数传入。

所以jsonp是须要server端的页面进行对应的配合的。

<?php

$callback = $_GET['callback'];//得到回调函数名

$data = array('a','b','c');//要返回的数据

echo $callback.'('.json_encode($data).')';//输出

?>

终于。输出结果为：dosomething(['a','b','c']);

假设你的页面使用jquery，那么通过它封装的方法就能非常方便的来进行jsonp操作了。

<script type="text/javascript">

    $.getJSON('http://example.com/data.php?callback=?

,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中的东西的：

<script type="text/javascript">

    function test(){

        var iframe = document.getElementById('ifame');

        var win = document.contentWindow;//能够获取到iframe里的window对象，但该window对象的属性和方法差点儿是不可用的

        var doc = win.document;//这里获取不到iframe里的document对象

        var name = win.name;//这里相同获取不到window对象的name属性

    }

</script>

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></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:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>

<script type="text/javascript">

    document.domain = 'example.com';//设置成主域

    function test(){

        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗体的 window 对象

    }

</script>

（2）.在页面 http://example.com/b.html 中也设置document.domain:

<script type="text/javascript">

    document.domain = 'example.com';//在iframe加载这个页面也设置document.domain，使之与主页面的document.domain同样

</script>

改动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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml"

 >

<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

 = 'http://a.com/null.html';

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('http://b.com/data.html',

 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方法。