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

posted @ 2017-08-15 10:31 brucemengbm 阅读(266) 评论(0) 编辑收藏举报

刷新页面返回顶部