关于ajax跨域请求（cross Domain）

Cross Domain AJAX主要就是A.com网站的页面发出一个XMLHttpRequest，这个Request的url是B.com，这样的请求是被禁止的，浏览器处于安全考虑不允许进行跨域访问，即同源策略。主要有4钟方式解决。

1、跨域代理（Cross Domain Proxy）。

主要原理就是写一个代理请求的转发过程。客户端请求自己的服务器，服务器把请求目标地址并且得到回应，服务器再把结果返回给客户端。这种方式，对于开发者来说还是不错的选择，因为可以在服务器上对回应的结果做自己的处理后把重新组织过的数据返回给客户端。

2、JSONP方式

JSONP的基本原理即是：利用HTML的<script>标签可获取任何来源JavaScript代码的特点，实现数据的跨域访问。在本地定义一个callback，通过<script>标签的src属性获取远程API的数据(将callback函数名传递过去)，远程服务器的API需要符合JSONP的规范，即将原本JSON格式的输出数据改写为javascript的函数调用代码(callback为函数，原JSON数据为参数)；这样API返回的不再是JSON格式的数据而是JavaScript的代码。

例子：

A.com/test.html的代码如下:

Html代码  收藏代码
  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4.     function callback(result) {  
  5.         alert(result.Name);  
  6.     }  
  7. </script>  
  8. <script type="text/javascript" src="http://B.com/api/user.php?cb=callback"></script>  
  9. </head>  
  10.   
  11. <body>  
  12. </body>  
  13. </html>  

 

将B.com/api/user.php的代码稍微进行修改，使得输出结果为：

 

Html代码  收藏代码
  1. callback({"Name": "Gavin", "Age" : 1982, "Rank": 7});  

 

 

这样当运行A.com/test.html的时候，代码<script type="text/javascript" src="http://B.com/api/user.php?cb=callback"></script>的结果变为：

Js代码  收藏代码
  1. <script type="text/javascript">  
  2.     callback({"Name": "Gavin", "Age" : 1982, "Rank": 7});  
  3. </script>  

 

然后调用本地定义的callback函数，输出result.Name即为Gavin。最终实现跨域数据访问。

 

3、使用Flash来跨域请求

在本地增加一个Flash文件，靠Flash文件来请求跨域的资源。详见

 

4、 Cross-Origin Resource Sharing标准

通过定义一系列请求头和响应头，可以在客户端透明（或者经过很少的修改）得支持跨源的 xmlhttprequest，那么只要 b.t.com  的响应设置合适的头部信息，最好情况下 a.t.com 可以不经过任何修改就可以向 b.t.com 发请求.。这种方式有个问题，万恶的IE浏览器要8以上才支持。这里

 

 

服务器通过返回响应头进行权限控制，例如

 

Access-Control-Allow-Origin：控制那些外部请求可以访问该资源

 

Access-Control-Allow-Credentials ：结合客户端 xmlhttprequest 的 withCredentials 属性可以控制是否发送 cookie 等验证信息

 

Access-Control-Allow-Headers ：控制客户端可以发送的额外头部信息，多个值使用逗号分隔

 

Access-Control-Allow-Methods： 控制客户端可以发送的请求方法（如：POST），多个值使用逗号分隔

 

 

 

 

ie 的例外

不出预料，ie 不完全支持此规范：

ie>=8

有自己的一套跨域请求机制 XDomainRequest ，通过替换 XmlHttpRequest 为XDomainRequest也可以往外部域发请求，但服务器端控制就少点，只能设置

 

Access-Control-Allow-Origin 控制那些外部请求可以访问该资源

 

也就意味着：不能发送 cookie 信息， 不能设置额外请求头。

 

 

 

 

 

子域访问作为跨域访问的特例，上述方法的任意一种都可行，但由于请求双方间共享一个主域，因而存在另外一种方案

 

如：

a.t.com 希望发请求给 b.t.com 的资源地址，但 b.t.com 的资源实际上只能通过 b.t.com 下的请求才能访问，而我们知道通过设置

 

Js代码  收藏代码
  1. document.domain = "t.com" ;  

 那么 a.t.com 就可以操作 b.t.com 的文档以及 window 对象。

 

 

问题

domain 设置是不可逆的，一旦主页面设置了 domain，那么其包含的iframe除非设置和主页面相同的 domain，否则就不能再和主页面通信，会导致大量的已有代码修改。

posted @ 2017-07-25 16:33  左正  阅读(6901)  评论(0)  编辑  收藏  举报