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. <body>
  11. </body>
  12. </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,否则就不能再和主页面通信,会导致大量的已有代码修改。

关于ajax跨域请求(cross Domain)相关推荐

  1. ajax请求时cookie,ajax跨域请求中的cookie问题

    update 另一个问题 ajax在进行复杂请求如PUT,POST,DELETE等时,当请求为cross domain request是,会先发一个OPTIONS请求确认服务器的跨域支持情况,在发送原 ...

  2. ajax跨域请求 html5,HTML5中使用postMessage实现Ajax跨域请求的方法

    由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建 ...

  3. Ajax 跨域请求详解

    问题描述: 实际开发中,我们经常会看到这样的错误提示: XMLHttpRequest cannot load http://-- No 'Access-Control-Allow-Origin' he ...

  4. ajax跨域请求传递Cookie问题

    问题描述 前后端完全分离的项目,前端使用Vue + axios,后端使用SpringMVC,容器为Tomcat. 使用CORS协议解决跨域访问数据限制的问题,但是发现客户端的Ajax请求不会自动带上服 ...

  5. js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...

    先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...

  6. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

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

    用iframe设置代理解决ajax跨域请求问题 参考文章: (1)用iframe设置代理解决ajax跨域请求问题 (2)https://www.cnblogs.com/ranzige/p/370965 ...

  8. Ajax跨域请求,无法传递及接收cookie信息解决方案

    Ajax跨域请求,无法传递及接收cookie信息解决方案 参考文章: (1)Ajax跨域请求,无法传递及接收cookie信息解决方案 (2)https://www.cnblogs.com/yalong ...

  9. Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案

    Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案 参考文章: (1)Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录 ...

  10. AJAX跨域请求数据原理与案例

    1.如何通过AJAX跨域请求数据 AJAX通过jsonp来实现跨域请求数据,通过设置dataType(jquery)为jsonp即可. 2.AJAX如何通过jsonp实现跨域(来源于其他网站资料) J ...

最新文章

  1. 数据在HDFS和HBASE之间互相传递的过程
  2. 遗传算法对于神经网络的优生优育
  3. python进程线程协程区别_Python3多线程与协程
  4. stream模式不能接受blob文件_一文带你层层解锁文件下载的奥秘
  5. Kubernetes-native 弹性分布式深度学习系统
  6. Excel2003怎样拆分单元格
  7. 【Python学习】 caffe-master 之 mnist 详解
  8. Cisco服务器怎么安装系统,CISCO服务器Linux系统安装步骤
  9. Win-MASM64汇编语言-DUP/TIMES
  10. 工作失误:没有分析进程消耗了这么多内存的原因
  11. JAVA垃圾回收器与垃圾回收算法
  12. 漫话中文自动分词和语义识别(下):句法结构和语义结构
  13. 无法启动此程序因为计算机中丢失msvcp140d,msvcp140.dll文件丢失修复工具
  14. 如何下载中文和英文的全文专利
  15. Linux下mplayer播放器安装及故障排除
  16. Microsoft Graph PowerShell v2 发布公开预览版 - 一半的大小,加速的自动化体验
  17. 3984个小时,阿秀亲眼见证:小白非科班学妹 - offer收割机
  18. table宽度比tbody宽度大4px
  19. MACbook系统从10.7升级到10.10
  20. 基数排序(基数排序)

热门文章

  1. AI 利用BP算法及Sigmoid函数,研究函数f(x)=2sinx-0.7的逼近问题-实验报告
  2. 语义分割-- SegNet:A Deep Convolutional Encoder-Decoder Architecture for Image Segmentation
  3. 中如何构造有参和无惨_CAD制图初学入门:CAD机械软件中如何构造孔?
  4. 聊聊数据库优化的4大手段
  5. 深入浅出Spring Security(三):FilterChainProxy的运行过程
  6. 5000 字的 Spring MVC 全面大总结
  7. 号称下一代可视化监控系统,结合SpringBoot使用,贼爽!
  8. 曲线聚类_机器学习入门必读:6种简单实用算法及学习曲线、思维导图
  9. html块级元素对齐方式,块级元素的三种垂直水平居中的方法
  10. python xlwings下载_Python学习随笔:使用xlwings读取和操作Execl文件