关于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>
- <head>
- <script type="text/javascript">
- function callback(result) {
- alert(result.Name);
- }
- </script>
- <script type="text/javascript" src="http://B.com/api/user.php?cb=callback"></script>
- </head>
- <body>
- </body>
- </html>
将B.com/api/user.php的代码稍微进行修改,使得输出结果为:
- 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>的结果变为:
- <script type="text/javascript">
- callback({"Name": "Gavin", "Age" : 1982, "Rank": 7});
- </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 下的请求才能访问,而我们知道通过设置
- document.domain = "t.com" ;
那么 a.t.com 就可以操作 b.t.com 的文档以及 window 对象。
问题
domain 设置是不可逆的,一旦主页面设置了 domain,那么其包含的iframe除非设置和主页面相同的 domain,否则就不能再和主页面通信,会导致大量的已有代码修改。
关于ajax跨域请求(cross Domain)的更多相关文章
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- 用iframe设置代理解决ajax跨域请求问题
面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题.在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到aja ...
- .Net Ajax跨域请求总结
导语 之前写过一篇文章Ajax跨域请求COOKIE无法带上的解决办法,这两天正好好好的查了一下相关知识,做来总结一下 一.传统 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法 ...
- 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题
为什么返回的数据前面有callback? 这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...
- HTML5:使用postMessage实现Ajax跨域请求
HTML5:使用postMessage实现Ajax跨域请求 由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) do ...
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 解决ajax跨域请求 (总结)
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- ASP.NET MVC 实现AJAX跨域请求方法《1》
ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
随机推荐
- mysql操作查询结果case when then else end用法举例
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN ...
- Spring IOC/DI- 3 different types
理论: IOC(Inversion of Control控制反转) DI(依赖注入) (Dependency Injection) 它不是一种技术而是一种思想.当初IOC理论的提出就是为了解决对象 ...
- Linux压缩与解压常用命令
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- [C语言入门笔记]变量与数据类型
变量与数据类型 什么是变量? 变量是一个变化的量 是内存中的一个空间 变量的定义方法是什么? 数据类型 变量名 = 值; 数据类型有哪些? 整型int 浮点型float double 字符型char ...
- python——Django(ORM连表操作)
千呼万唤始出来~~~当当当,终于系统讲了django的ORM操作啦!!!这里记录的是django操作数据库表一对多.多对多的表创建及操作.对于操作,我们只记录连表相关的内容,介绍增加数据和查找数据,因 ...
- javascript进阶系列专题:闭包(Closure)
在javascript中,函数可看作是一种数据,可以赋值给变量,可以嵌套在另一个函数中. var fun = function(){ console.log("平底斜"); } f ...
- find / -type f -name "*fetion*" |xargs rm -rf {}\
find / -type f -name "*fetion*" |xargs rm -rf {}\
- C#如果把A.new()编译成new A()
缘由 对于初次接触某个第三方库的C#开发者,假如要调用里面一个方法,发现需要一个A类型的实例作为参数,怎么获得这个实例呢? 我想大多数人会先尝试new A吧: 如果没有,可能会尝试输入A.看看有没可能 ...
- 269. Alien Dictionary 另类字典 *HARD*
There is a new alien language which uses the latin alphabet. However, the order among letters are un ...
- python 异常处理、文件常用操作
异常处理 http://www.jb51.net/article/95033.htm 文件常用操作 http://www.jb51.net/article/92946.htm