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. 记录centos6.8安装Oracle10.2.0.1过程中的错误解决

    [root@hadoop01 database]# ./runInstaller ./runInstaller: /opt/database/install/.oui: /lib/ld-linux.s ...

  2. CentOS7 yum 安装git

    1.查看系统是否已经安装git git --version 2.CentOS7 yum 安装git yum install -y git 3.安装成功 4.卸载git yum remove git

  3. CSS3支持box-flex弹性布局

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  4. jquery 格式化日期

    function setMaxEndDate(){ var beginDate=$("#beginDate").val(); var time = new Date(beginDa ...

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

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

  6. [原创]Win7、Win8、Win10始终以管理员身份运行程序。

    在Win7.Win8.Win10系统中,以管理员身份运行程序很麻烦,一般有以下几种方式: 1.在可执行程序或快捷方式上右键,以管理员身份运行: 2.在可执行程序或快捷方式上右键->属性-> ...

  7. float和double的精度

    作者: jillzhang 联系方式:jillzhang@126.com 原网址:http://blog.csdn.net/wuna66320/article/details/1691734 1 范围 ...

  8. whereis 和which

    这两个命令用的好,可以很快找出文件的路径 [root@oc3408554812 zip-3.0]# which passwd/usr/bin/passwd[root@oc3408554812 zip- ...

  9. JavaWeb AJAX

    1.  Asynchronized JavaScript And XML 异步JavaScript和XML,它并不是一门新的语言或技术,实际是几项技术按一定的方式组合在一起共同的协作中发挥各自的作用, ...

  10. Fastest Wordpress Theme -wpfast Download

    Are you in search of fastest wordpress theme to increase your product sell and conversion ,then you ...