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文件来请求跨域的资源。详见
通过定义一系列请求头和响应头,可以在客户端透明(或者经过很少的修改)得支持跨源的 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,否则就不能再和主页面通信,会导致大量的已有代码修改。
分享到:
相关推荐
本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...
crossDomain: true, success: function(response) { console.log("成功获取数据:", response); }, error: function(jqXHR, textStatus, errorThrown) { console.error("请求失败:", textStatus, errorThrown);...
这个"ajax跨域请求demo.zip"压缩包提供了一个关于如何实现Ajax跨域请求的示例,涉及到前后端的交互。 首先,我们关注"前端代码"部分。前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是...
在jQuery中,使用$.ajax()方法发起AJAX请求时,可以设置`crossDomain`参数为`true`来开启跨域请求。例如: ```javascript $.ajax({ url: 'http://example.com/api/data', // 跨域的URL type: 'GET', crossDomain...
同时,`crossDomain: true`表明这是一个跨域请求。 在服务器端,为了允许来自不同源的请求,你需要配置CORS策略。这通常通过设置HTTP响应头`Access-Control-Allow-Origin`、`Access-Control-Allow-Credentials`等来...
5. **Flash跨域**:虽然Flash已逐渐被淘汰,但在过去,它可以通过`crossdomain.xml`文件来允许跨域请求。不过,这种方法需要Flash插件支持,且不适用于移动设备。 6. **Domain属性(仅限子域)**:在cookies中设置`...
**Ajax跨域请求详解** Ajax(Asynchronous JavaScript and XML)技术是现代Web开发中的关键组成部分,它允许在不刷新整个页面的情况下与服务器进行异步数据交换。在处理跨域请求时,Ajax扮演着至关重要的角色。跨域...
在前端JavaScript部分,使用Ajax发起跨域请求时,可以借助jQuery的$.ajax或$.getJSON等函数,设置`xhrFields`和`crossDomain`参数: ```javascript $.ajax({ url: 'http://api.example.com/data', type: 'GET', ...
### 如何实现Ajax跨域访问 在Web开发中,由于同源策略的限制,JavaScript只能对同源的页面进行操作,不能对不同源的页面进行请求。然而,在实际的应用场景中,经常会出现需要向不同域名下的服务器发起请求的情况。...
jQuery的`$.ajax()`方法可以通过设置`xhrFields.withCredentials`为`true`来开启带上Cookie的CORS请求,并通过`crossDomain`设置为`true`启用跨域。 4. **jQuery的Ajax方法** jQuery的`$.ajax()`方法是最常用的...
crossDomain: true, // 开启跨域 xhrFields: { withCredentials: true // 允许携带认证信息 }, success: function(response) { console.log('Success:', response); }, error: function(error) { console....
为了解决AJAX跨域问题,开发者可以采用以下几种策略: 1. JSONP(JSON with Padding) JSONP是一种绕过同源策略的方法,它利用了`<script>`标签不受同源策略限制的特点。JSONP的工作原理是服务器提供一个可被调用的...
当需要跨域请求时,通常会使用CORS(Cross-Origin Resource Sharing,跨源资源共享)这一现代浏览器支持的标准。 1. CORS基础: CORS通过在服务器端设置`Access-Control-Allow-Origin`响应头来允许特定的源进行...
在HTMLTest文件中,可能包含了一个简单的AJAX跨域请求的示例代码。常见的使用jQuery或者原生JavaScript发起AJAX请求的方式如下: jQuery示例: ```javascript $.ajax({ url: 'http://otherdomain.com/api', type:...
然而,随着Web应用的复杂性和交互性的提高,跨域数据请求的需求越来越普遍,这就引出了Ajax跨域提交的概念。 Ajax,即Asynchronous JavaScript and XML,是一种在无需刷新整个页面的情况下,能够更新部分网页的技术...
crossDomain: true, // 表明请求为跨域请求 success: function() { // 请求成功后的回调函数 successCallback.apply(this, arguments); }, failure: function() { // 请求失败后的回调函数 failureCallback....
根据提供的文件内容,完美解决Ajax跨域请求无法携带cookies的方法如下: 1. 客户端设置(以原生JavaScript和jQuery为例): - 使用原生JavaScript发起Ajax请求时,需要创建一个`XMLHttpRequest`对象,并在调用`...
本教程将重点讲解如何在ASP.NET Web环境中处理Ajax跨域访问。 一、理解同源策略 同源策略是浏览器为了保护用户安全而实施的一项安全机制,它禁止了一个源(domain)的文档或脚本获取或操作另一个源的资源。这意味着...
Ajax跨域请求是Web开发中一个非常重要的知识点,它涉及到前端和后端的数据交互问题。所谓“跨域”,指的是浏览器出于安全考虑,阻止页面脚本进行非同源域的HTTP请求。然而,在实际开发过程中,经常需要从前端页面...