工作中,经常会遇到需要
跨域
请求数据的情况。由于浏览器的
同源策略,导致无法直接通过ajax拿到后台数据。解决这个问题的方式之一就是
JSONP
。还有一种方式更高效简单——
跨域资源共享(Cross-origin Resource Sharing )
,采用这种方式,前端不需要做任何的修改,和平时一样写ajax方法,就能够拿到后台数据。
同源策略(same-origin policy)—— 浏览器安全的基石。
含义:
1995年,同源政策由Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初的含义是指A网页cookie,B网页不能打开,除非这A、B两个页面同源。所谓同源指的是三个相同。协议相同,域名相同,端口相同。
举例来说,现在打开的页面是http://www.baidu.com
网址。同源情况如下:
https://www.baidu.com // 不同源(协议不同)
http://wenku.baidu.com // 不同源(域名不同)
http://www.baidu.com:8080 // 不同源(端口不同)
http://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0 //同源
目的:
保证用户信息安全,防止网站数据的窃取。
设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?
很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。
由此可见,”同源政策”是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。
限制范围:
随着互联网的发展,”同源政策”越来越严格。目前,如果非同源,共有三种行为受到限制。
//(1) Cookie、LocalStorage 和 IndexDB 无法读取。
//(2) DOM 无法获得。
//(3) AJAX 请求不能发送。
跨域资源共享(Cross-origin resource sharing)
跨域资源共享(CORS)是一个W3C标准,它允许浏览器向跨源服务器发出
XMLHttpRequest
请求,从而克服了AJAX只能同源使用的限制。
简介:
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
简单的说,遇到再遇到跨域问题,如果通过CORS来解决的话,前端工作者正常些AJAX就可以了。^_^ (此处应有掌声!!!)
参考
关于跨域资源共享(CORS)和 浏览器的同源策略限制的具体讲解。已经有很多大神写过文章博客。在这里就不再班门弄斧了。有兴趣的同学可以根据以下两个链接深入研究下。