跨域 - 概念

一、什么是同源策略

Same Origin Policy同源策略，是一种约定，更是一种约束，约束着浏览器的行为。同源策略是由NetScape网景公司首先提出的一种安全策略，所有支持Javascript的浏览器都必须遵守这一约定，即执行脚本只能访问与之同源的资源。通俗而言，执行在源（或者说域）ServerA上的脚本只能访问操作在ServerA上执行的DOM树和脚本（注意：是要在源ServerA上执行，并不是存储在ServerA上，这个会在JSONP时说到）；当ServerA上的脚本试图访问操作在源（域）ServerB上的DOM时，将被拒绝。

二、如何同源

任何一个浏览器请求，只有同时满足一下三个条件是才是同源：

  • 协议     （分别采用http和https的请求被视为非同源）
  • 端口
  • 主机     （域名、子域名、IP）

下表是几种情况的分析：

URI 是否同源 说明
http://ServerA.Suzhou.com/AppA/index.htm

https://ServerA.Suzhou.com/AppB/index.htm

否 协议不一致

http:8181//ServerA.Suzhou.com/AppA/index.htm

http:8282//ServerA.Suzhou.com/AppB/index.htm

否 端口不一致

http:8181//ServerA.Suzhou.com/AppA/index.htm

http:8181//ServerA.UK.com/AppB/index.htm

否 域名不一致

http//ServerA.Suzhou.com/AppA/index.htm

http//ServerB.Suzhou.com/AppB/index.htm

否 主机名不一致

http//ServerA.Suzhou.com/AppA/index.htm

http//192.168.100.101/AppB/index.htm

否 虽然主机名与IP对应，但是还是非同源。
（判断报文头时无法判断是否对应）

http//ServerA.Suzhou.com/AppA/index.htm

http//ServerA.Suzhou.com/AppB/index.htm

是 三个条件都符合

三、为什么要跨域

在项目实施过程中，多少会将不同的服务分布于不同的服务器上，降低服务器负载也好，更好地实现资源共享也好，总之这时就需要跨域获取资源。对于Web而言，跨域资源的请求多数是迎合Ajax要求实现无刷新更新。

四、常用跨域技术

  • JSONP
  • Server-Proxy
  • CORS

下篇将会对这几种技术详细介绍

时间： 2024-10-03 23:16:14

跨域 - 概念的相关文章

跨域概念

域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation).信任关系是连接在域与域之间的桥梁.当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理. 有一种简明的说法来解释广域跨域:跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.在

Vue.js——基于$.ajax实现数据的跨域增删查改

概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说起ajax请求,大家第一时间会想到jQuery.除了拥有强大的DOM处理能力,jQuery提供了较丰富的ajax处理方法,它不仅支持基于XMLHttpRequest的ajax请求,也能处理跨域的JSONP请求. 之前有读者问我,Vue.js能结合其他库一起用吗?答案当然是肯定的,V

JS跨域之总结

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html http://blog.csdn.net/hfahe/article/details/7730944 http://segmentfault.com/a/1190000000718840#articleHeader5 (本文

关于sencha touch 的JSONP跨域请求的学习研究

此篇文章是对自己在研究学习sencha touch的过程中的点滴记录,主要是JSONP的跨域请求这方面,对于何为是跨域概念还有不熟悉的,可以自己问下度娘. 先上张图: 我要完成的功能就是表格下拉刷新,并发送请求到我自己写的服务程序端,由于服务程序和此SENCHA的程序不再一个域下,总是出现请求出错(提示的大概信息就是跨域的问题).这两天真是被这个问题折磨的很久,由于没接触过sencha touch 的JSONP,开始也是一头雾水,也看了好多的资料.最终理解了SENCHA里的jsonp的请求模式.

跨域请求的概念和解决办法

相关概念 同源是指相同的协议.域名.端口,三者都相同才属于同源. 同源策略浏览器处于安全考虑,在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本,站外其他来源的脚本同页面的交互则被严格限制. 跨域由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域 跨域资源共享(Cross Origin Resource Sharing,CORS)是一个解决跨域问题的好办法,从而可以使用XHR从不同的源加载数据和资源. 看看哪些情况下属于跨域访问: 解决办法

同源策略和跨域问题

1 同源策略 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制.比如源a的js不能读取或设置引入的源b的元素属性. 那么先定义下什么是同源,所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 可以看下面的几个示例来更加清楚的了解一下同源的概念: URL1 URL2 说明 是否允许通信 http://www.foo.com/js/a.js http://www.foo.com/js/b.js 协议.域名.端口都相同 允许 http://www.

你不知道的JavaScript--Item33 跨域总结与解决办法

一.神马是跨域(Cross Domain) 说白点就是post.get的url不是你当前的网站,域名不同.例如在*aaa.com/a.html*里面,表单的提交action是bbb.com/b.html. 不仅如此,www.aaa.com和aaa.com之间也属于跨域,因为www.aaa.com是二级域名,aaa.com是根域名. JavaScript出于安全方面的考虑,是不允许跨域调用其他页面的对象的(同源策略 Same-Origin Policy). 特别注意两点: 第一,如果是协议和端口造

前端跨域访问

1. JSONP 2. CORS(Cross-origin resource sharing) 2.1 运行模式 2.2 JQuery支持CORS 2.3 与JSONP相比 3. 跨域访问在点评的应用 References 在互联网应用中: 一个页面需要请求多个域名下的web服务端接口 同时一个web服务接口可能会被很多不同域名下的页面请求. 一个web应用如果支持为了支持以上模式而申请多个域名是不合算的,因为域名申请和管理所占用的资源比较大,因此服务端支持跨域就成了一个更合理的解决方案.解决跨

HTML5解决跨域问题

HTML5解决跨域问题 由于浏览器的同源策略,网络连接的跨域访问是不被允许的,XHR对象不能直接与非同源的网站处理数据交互.而同源指的是什么呢?同源的范畴包括:规则(协议),主机号(域名.ip等),端口号. 但是随着开放,共享平台的流行,跨域访问的需求愈加强烈.目前最常用的跨域方案是动态加入script标签,这多少有点hack的意味,跨域访问似乎一直没有什么安全且光明正大的办法. 终于,HTML5提供的XMLHttpRequest Level2实现了跨域访问以及其他的一些新功能.下面我们会详细讨