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

分类: JAVASCRIPT
 
 
本文转自左正博客园博客,原文链接: http://www.cnblogs.com/soundcode/p/7234920.html /,如需转载请自行联系原作者
目录
打赏
0
0
0
0
19
分享
相关文章
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
86 2
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
76 0
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
97 22
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
70 18
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
149 4
|
7月前
|
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
99 10
|
7月前
|
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
69 7
React技术栈-react使用的Ajax请求库用户搜索案例
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等