跨域

176 阅读2分钟

一.同源策略

  • 1.什么是源? 源 = 协议+域名+端口号,可以通过window.origin或者location.origin获取到。
  • 2.如果两个url的协议、域名和端口都是一样的,那么这两个url就是同源的。例如http://qq.com:8080和http://qq.com:8081这两个源是不同的,因为端口号不同。

浏览器为了保护隐私,规定:

如果一个JS文件运行在源A里面,那么就只能获取源A的数据,不能获取源B的数据,即不允许跨域。例如http://jack.com/index.html引用了http://lb.com/server.js,那么就说server.js运行在源http://jack.com里面,这里省略了端口号。

也就是说server.js只能获取http://jack.com的数据,不能获取http://lb.com的数据。

总之,不同源的页面之间,不准相互访问数据。我们可以做一个实验来验证一下: 详情请看GitHub:github.com/Luobinf/COR…

浏览器限制了不同源的页面之间,不准相互访问数据。那有时候我们就是需要跨域相互访问数据怎么办? 可以使用CORS或者JSONP来进行跨域的数据访问。

二.CORS

问题的根源是浏览器不允许不同源之间不能相互访问数据,但是有时候两个兄弟网站之间就是需要相互访问数据,那怎么办?可以使用CORS来突破浏览器的同源限制。

什么是CORS?CORS的全称是Cross-origin resource sharing,是跨域资源共享的意思。它使用额外的HTTP头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。

如何使用?只要在访问的那一端的响应头中写上你所允许的那个源访问就可以了,例如:Access-Control-Allow-Origin:jack.com。具体例子请看GitHub:github.com/Luobinf/COR…

由于IE6、7、8、9不支持CORS,但是我也需要跨域怎么办?可以使用JSONP。

三.JSONP

什么是JSONP?

JSONP就是请求方动态的创建script标签,并且将该script的src指向需要获取数据的那一方,服务器再以函数调用的形式将需要获取的数据包裹进去,可以是JSON格式的数据或者xml格式等其它格式的数据。最后通过回调的方式,请求方获取到数据。

JSONP的优缺点?

JSONP可以兼容IE,进行跨域访问数据。由于JSONP是使用了script标签来进行访问的,故只支持get请求,不支持post请求,且无法向AJAX那样获得精确的状态码,只知道成功或失败。

具体例子看GitHub:github.com/Luobinf/COR…