什么是跨域 跨域的成功方式有哪些 (什么是跨域跨界)

本文目录导航：

• 什么是跨域，跨域的成功方式有哪些
• 跨域恳求是什么?
• HTML的img标签不支持src跨域了吗？手机阅读器关于img的src跨域只要chrome支持。我

什么是跨域，跨域的成功方式有哪些

跨源资源共享

CORS(Cross-Origin Resource Sharing,跨源资源共享)是 W3C 的一个上班草案,定义了在必定访 问跨源资源时,阅读器与主机应该如何沟通。

CORS 面前的基本思维,就是经常使用自定义的 HTTP 头部 让阅读器与主机启动沟通,从而选择恳求或照应是应该成功,还是应该失败。

比如一个便捷的经常使用 GET 或 POST 发送的恳求,它没有自定义的头部,而主体内容是 text/plain。

在 发送该恳求时,要求给它附加一个额外的 Origin 头部,其中蕴含恳求页面的源消息(协定、域名和端 口),以便主机依据这个头部消息来选择能否给予照应。

上方是 Origin 头部的一个示例:

假设主机以为这个恳求可以接受,就在 Access-Control-Allow-Origin 头部中回发相反的源消息(假设是公共资源,可以回发”*”)。例如:

假设没有这个头部,或许有这个头部但源消息不婚配,阅读器就会采纳恳求。

反常状况下,阅读器 会处置恳求。

留意,恳求和照应都不蕴含 cookie 消息。

IE对CORS的成功

微软在 IE8 中引入了 XDR(XDomainRequest)类型。

这个对象与 XHR 相似,但能成功安保牢靠 的跨域通讯。

XDR 对象的安保机制局部成功了 W3C 的 CORS 规范。

以下是 XDR 与 XHR 的一些不同之 处。

XDR 对象的经常使用方法与 XHR 对象十分相似。

也是创立一个 XDomainRequest 的实例,调用 open() 方法,再调用 send()方法。

但与 XHR 对象的 open()方法不同,XDR 对象的 open()方法只接纳两个 参数:恳求的类型和 URL。

一切 XDR 恳求都是异步口头的,不能用它来创立同步恳求。

恳求前往之后,会触发 load 事情, 照应的数据也会保留在 responseText 属性中,如下所示。

在接纳到照应后,你只能访问照应的原始文本;没有方法确定照应的形态代码。

而且,只需照应有 效就会触发 load 事情,假设失败(包括照应中缺少 Access-Control-Allow-Origin 头部)就会触 发 error 事情。

遗憾的是,除了失误自身之外,没有其余消息可用,因此惟一能够确定的就只要恳求 未成功了。

要检测失误,可以像上方这样指定一个 onerror 事情处置程序。

鉴于造成 XDR 恳求失败的要素很多,因此倡导你不要遗记经过 onerror 事情处 理程序来捕捉该事情;否则,即使恳求失败也不会有任何揭示。

在恳求前往前调用 abort()方法可以中断恳求:

与 XHR 一样,XDR 对象也支持 timeout 属性以及 ontimeout 事情处置程序。

上方是一个例子。

这个例子会在运转 1 秒钟后超时,并随即调用 ontimeout 事情处置程序。

为支持 POST 恳求,XDR 对象提供了 contentType 属性,用来示意发送数据的格局,如上方的例子所示。

这个属性是经过 XDR 对象影响头部消息的惟一方式。

其余阅读器对CORS的成功Firefox 3.5+、Safari 4+、Chrome、iOS 版 Safari 和 Android 平台中的 WebKit 都经过 XMLHttpRequest 对象成功了对 CORS 的原生支持。

在尝试关上不同起源的资源时,无需额外编写代码就可以触发这个行 为。

要恳求位于另一个域中的资源,经常使用规范的 XHR 对象并在 open()方法中传入相对 URL 即可,例如:

与 IE 中的 XDR 对象不同,经过跨域 XHR 对象可以访问 status 和 statusText 属性,而且还支 持同步恳求。

跨域 XHR 对象也有一些限度,但为了安保这些限度是必需的。

以下就是这些限度。

由于无论同源恳求还是跨源恳求都经常使用相反的接口,因此关于本地资源,最好经常使用相对 URL,在访 问远程资源时再经常使用相对 URL。

这样做能消弭歧义,防止产生限度访问头部或本地 cookie 消息等疑问。

Preflighted Reqeusts

以下是一个带有自定义头部 NCZ 的经常使用 POST 方法发送的恳求。

跨源资源共享

发送这个恳求后,主机可以选择能否准许这种类型的恳求。

主机经过在照应中发送如下头部与 阅读器启动沟通。

例如:

支持 Preflight 恳求的阅读器包括 Firefox 3.5+、Safari 4+和 Chrome。

IE 10 及更早版本都不支持。

带凭据的恳求

自动状况下,跨源恳求不提供凭据(cookie、HTTP 认证及客户端 SSL 证实等)。

经过将 withCredentials 属性设置为 true,可以指定某个恳求应该发送凭据。

假设主机接受带凭据的请 求,会用上方的 HTTP 头部来照应。

假设发送的是带凭据的恳求,但主机的照应中没有蕴含这个头部,那么阅读器就不会把照应交给JavaScript(于是,responseText 中将是空字符串,status 的值为 0,而且会调用 onerror()事情处 理程序)。

另外,主机还可以在 Preflight 照应中发送这个 HTTP 头部,示意准许源发送带凭据的恳求。

跨阅读器的CORS

即使阅读器对 CORS 的支持水平并不都一样,但一切阅读器都支持便捷的(非 Preflight 和不带凭据 的)恳求,因此有必要成功一个跨阅读器的打算。

检测 XHR 能否支持 CORS 的最简单方式,就是审核 能否存在 withCredentials 属性。

再联合检测 XDomainRequest 对象能否存在,就可以统筹一切浏 览器了。

Firefox、Safari 和 Chrome 中的 XMLHttpRequest 对象与 IE 中的 XDomainRequest 对象相似,都 提供了够用的接口,因此以上形式还是相当有用的。

这两个对象独特的属性/方法如下。

以上成员都蕴含在 createCORSRequest()函数前往的对象中,在一切阅读器中都能反经常常使用。

其余跨域技术

在 CORS 产生以前,要成功跨域 Ajax 通讯颇费一些周折。

开发人员想出了一些方法,应用 DOM 中 能够口头跨域恳求的配置,在不依赖 XHR 对象的状况下也能发送某种恳求。

只管 CORS 技术曾经无处 不在,但开发人员自己发明的这些技术依然被宽泛经常使用,毕竟这样不要求修正主机端代码。

图像Ping

上述第一种跨域恳求技术是经常使用<img>标签。

咱们知道,一个网页可以从任何网页中加载图像,不 用担忧跨域不跨域。

这也是在线广告跟踪阅读量的关键方式。

正如第 13 章探讨过的,也可以灵活地创 建图像,经常使用它们的 onload 和 onerror 事情处置程序来确定能否接纳到了照应。

灵活创立图像常罕用于图像 Ping。

图像 Ping 是与主机启动便捷、单向的跨域通讯的一种方式。

恳求的数据是经过查问字符串方式发送的,而照应可以是恣意内容,但理论是像素图或 204 照应。

经过 图像 Ping,阅读器得不就任何详细的数据,但经过侦听 load 和 error 事情,它能知道照应是什么时 候接纳到的。

来看上方的例子。

这里创立了一个 Image 的实例,而后将 onload 和 onerror 事情处置程序指定为同一个函数。

这 样无论是什么照应,只需恳求成功,就能失掉通知。

恳求从设置 src 属性那一刻开局,而这个例子在请 求中发送了一个 name 参数。

图像 Ping 最罕用于跟踪用户点击页面或灵活广告曝光次数。

图像 Ping 有两个关键的缺陷,一是只 能发送 GET 恳求,二是不可访问主机的照应文本。

因此,图像 Ping 只能用于阅读器与主机间的单向通讯。

JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写,是运行 JSON 的一种新方法, 在起初的 Web 服务中十分盛行。

JSONP 看起来与 JSON 差不多,只不过是被蕴含在函数调用中的 JSON, 4 就像上方这样。

JSONP 由两局部组成:回调函数和数据。

回调函数是当照应来到时应该在页面中调用的函数。

回调 函数的名字普通是在恳求中指定的。

而数据就是传入回调函数中的 JSON 数据。

上方是一个典型的 JSONP 恳求。

这个 URL 是在恳求一个 JSONP 天文定位服务。

经过查问字符串来指定 JSONP 服务的回调参数是很 经常出现的,就像上方的 URL 所示,这里指定的回调函数的名字叫 handleResponse()。

JSONP 是经过灵活<script>元历来经常使用的,经常使用时可以为src 属性指定一个跨域 URL。

这里的<script>元素与<img>元素相似,都有才干不受限度地从其余域 加载资源。

由于 JSONP 是有效的 JavaScript 代码,所以在恳求成功后,即在 JSONP 照应加载到页面中 以后,就会立刻口头。

来看一个例子。



这个例子经过查问天文定位服务来显示你的 IP 地址和位置消息。

JSONP 之所以在开发人员中极为盛行,关键要素是它十分便捷易用。

与图像 Ping 相比,它的好处 在于能够间接访问照应文本,支持在阅读器与主机之间双向通讯。

不过,JSONP 也有两点无余。

参考：javascript初级程序设计第21章

跨域恳求是什么?

疑问一：跨域是指什么,由于什么惹起的?有哪些处置打算?web前端常识跨域是指 不同域名之间相互访问 例如 我的电脑上有2个主机 192.168.0.11 192.168.0.12 假设第一个主机上的页面要访问第二个主机 就叫做跨域 或许baidu 要访问xxx 也是不同域名 也是跨域 HTML5 里有个 方法，支持跨域访问，概略可以参考 webhek/window-postmessage-api 假设你的程序在主机上，也可以启动相应的操作来成功跨域访问 纯手打 有疑问欢迎咨询 疑问二：什么叫做跨域访问，求大神解答假设在A网站中，咱们宿愿经常使用Ajax来取得B网站中的特定内容 假设A网站与B网站不在同一个域中，那么就产生了跨域访问疑问 Ajax的跨域访问疑问是现有的Ajax开发人员比拟常遇到的疑问 普通都会用jsoncallback方法来处置 你可以了解为两个域名之间不能跨过域名来发送恳求或许恳求数据，否则就是不安保的 宿愿能协助到你 疑问三：什么是AJAX跨域恳求假定你有两个站点a和b 在a中用ajax向b发送恳求，这就是跨域恳求了。

疑问四：什么是跨域访问跨域访问就是你在一个域环境下阀访问另一个域的内容。

跨域访问前提是彼此相互信赖，不然是没法访问的。

疑问五：什么是JS跨域访问ajax或许iframe指向的地址中，二级域名、端口、协定必定与主页面齐全相反，否则就算跨域 比如 访问 是跨域； :8080访问:80 是跨域； 访问 是跨域 ajax跨域，两种方法：后端写个代理接口，让后端去抓数据；或许与对方协作，用jsonp等方式传送数据 iframe跨域疑问有点多，必定要失掉iframe外部页面的配合才或许通讯，方法也比拟多： 1，假写hash值通讯，父子页面各自建设轮询去检测iframe中url的hash值，经过值来通讯 2，应用HTML5的postMessage，不过留意这个也是异步的 3，应用IE6\\7中对navigator的bug，我前共事发现的，在ie6/7中，父子页面经常使用的是同一个物品，父页面改了，子页面也会跟着变； 4，iframe中嵌套一层与顶层页面同域的页面，比如a中套b，b中套c，其中a、c同域，b做出扭转后经过url给c传值，c中操作top对象也就是a，由于同域，所以不会有疑问 疑问六：$跨域恳求怎样处置post恳求启动跨域 angularjs内置封装了类ajax的网络服务$,所以成功了依赖外部插件来成功完整的前后端分别打算 $ = { getData: function () { $({ method: POST, url: localhost:8000, headers: { Content-Type : application/x--form-urlencoded },>HTML的img标签不支持src跨域了吗？手机阅读器关于img的src跨域只要chrome支持。我

只需是公网能访问的都可以作为img的src渲染。

除非你给的不是相对门路，而是相对门路。

最好贴出代码