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的代码如下:

  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. <body>
  11. </body>
  12. </html>

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

  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>的结果变为:

  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 下的请求才能访问,而我们知道通过设置

  1. document.domain = "t.com" ;

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

问题

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

关于ajax跨域请求(cross Domain)的更多相关文章

  1. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  2. 用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...

  3. .Net Ajax跨域请求总结

    导语 之前写过一篇文章Ajax跨域请求COOKIE无法带上的解决办法,这两天正好好好的查了一下相关知识,做来总结一下 一.传统 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法 ...

  4. 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  5. HTML5:使用postMessage实现Ajax跨域请求

    HTML5:使用postMessage实现Ajax跨域请求 由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) do ...

  6. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  7. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  8. 解决ajax跨域请求 (总结)

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  9. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  10. $.ajax 跨域请求 Web Api

    WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

随机推荐

  1. TAP/TUN(二)

    tap.c代码      #include<assert.h> #include<fcntl.h> #include<stdio.h> #include<st ...

  2. angular中动态添加的元素绑定事件问题

    $compile http://segmentfault.com/q/1010000000726448/a-1020000000727088 接口下载问题

  3. z-index深入理解

    [CSS深入理解之z-index]听课总结 (http://www.imooc.com/learn/643)   一.z-index基础知识 1.z-index的含义 z-index属性指定了元素及其 ...

  4. mysql 查询数据库表结构

    1. mysql> describe tmp_log; +----------+------------------+------+-----+---------+--------------- ...

  5. 手机版web相关meta配置

    若页面需默认用ie兼容内核,增加标签: 若页面需默认用ie标准内核,增加标签: --> 页面标题

  6. LCS

    /**LCS问题*/ #include <iostream>#include <string>#include <algorithm> using namespac ...

  7. php 面试题收集-基础题

    1.表单中 get与post提交方法的区别?答:get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据,可以通过表单提交大量信息. 2.session与cookie的区别?答:s ...

  8. iOS开发中关于像素的几个概念

    DPI与PPI DPI(Dots Per Inch)是印刷行业中用来度量空间点密度用的,这个值是打印机每英寸可以喷的墨汁点数. 计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设备中的原子单 ...

  9. NoSQL生态系统——类似Bigtable列存储,或者Dynamo的key存储(kv存储如BDB,结构化存储如redis,文档存储如mongoDB)

    摘自:http://www.ituring.com.cn/article/4002# NoSQL系统的数据操作接口应该是非SQL类型的.但在NoSQL社区,NoSQL被赋予了更具有包容性的含义,其意为 ...

  10. oracle 存储过程访问其他用户的表

    用户user2想在存储过程中查询用户User1的表table1, 在PL/SQL中用user1登陆,执行以下语句即可: grant select on User1.table1 to user2;