软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> js跨域解决方案 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]js跨域解决方案

  2016-04-02 20:54:43

什么是跨域?


概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域。(所谓同源是指,域名,协议,端口相同。),对于端口和协议的不同,只能通过后台来解决。
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     同一域名,不同端口  不允许
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)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
例如:客户端的域名是www.client.com,而请求的域名是www.server.com
在被请求的Response header中加入
[php] view plain copy
 

  1. // 指定允许其他域名访问  
  2. header('Access-Control-Allow-Origin:*');  
  3. // 响应类型  
  4. header('Access-Control-Allow-Methods:POST');  
  5. // 响应头设置  
  6. header('Access-Control-Allow-Headers:x-requested-with,content-type');  

就可以实现ajax POST跨域访问了。
代码如下:
client.html 路径:http://www.client.com/client.html
[html] view plain copy
 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  5.   <title> 跨域测试 </title>  
  6.   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
  7.  </head>  
  8.   
  9.  <body>  
  10.     <div id="show"></div>  
  11.     <script type="text/javascript">  
  12.     $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"})  
  13.       .done(function(data){  
  14.         document.getElementById("show").innerHTML = data.name + ' ' + data.gender;  
  15.       });  
  16.     </script>  
  17.  </body>  
  18. </html>  

server.php 路径:http://www.server.com/server.php
[php] view plain copy
 

  1. <?php  
  2. $ret = array(  
  3.     'name' => isset($_POST['name'])? $_POST['name'] : '',  
  4.     'gender' => isset($_POST['gender'])? $_POST['gender'] : ''  
  5. );  
  6.   
  7. header('content-type:application:json;charset=utf8');  
  8. header('Access-Control-Allow-Origin:*');  
  9. header('Access-Control-Allow-Methods:POST');  
  10. header('Access-Control-Allow-Headers:x-requested-with,content-type');  
  11.   
  12. echo json_encode($ret);  
  13. ?>  

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
 

  1. <?php  
  2. $ret = array(  
  3.     'name' => isset($_POST['name'])? $_POST['name'] : '',  
  4.     'gender' => isset($_POST['gender'])? $_POST['gender'] : ''  
  5. );  
  6.   
  7. header('content-type:application:json;charset=utf8');  
  8.   
  9. $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  
  10.   
  11. $allow_origin = array(  
  12.     'http://www.client.com',  
  13.     'http://www.client2.com'  
  14. );  
  15.   
  16. if(in_array($origin$allow_origin)){  
  17.     header('Access-Control-Allow-Origin:'.$origin);  
  18.     header('Access-Control-Allow-Methods:POST');  
  19.     header('Access-Control-Allow-Headers:x-requested-with,content-type');  
  20. }  
  21.   
  22. echo json_encode($ret);  
  23. ?>  

要解决跨域的问题,我们可以使用以下几种方法:

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是需要服务器端的页面进行相应的配合的。
<?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方法。
 
上一篇文章      下一篇文章      查看所有文章
2016-04-02 20:54:21  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-4-29 9:47:52
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --