Ajax 跨域解决方案

在解决Ajax跨域问题之前,我们先一起来看看什么是浏览器的同源策略

一.浏览器同源政策

  • 含义
    1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
    最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

协议相同
域名相同
端口相同

举例来说,http://www.guangzhou.com/p/page.html这个网址,协议是http://,域名是 www.guangzhou.com,端口是80(默认端口可以省略)。它的同源情况如下。

http://www.guangzhou.com/dir/other.html: 同源
http://guangzhou.com/dir/other.html: 不同源(域名不同)
http://v2.www.guangzhou.com/dir/other.html:不同源(域名不同)
http://www.guangzhou.com:81/dir/other.html:不同源(端口不同)

  • 目的
    同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
    设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?
    很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。
    由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

  • 限制范围
    随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。

(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。

虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。

我们下面只专注于ajax跨域请求!!!


二.如何解决ajax跨域

一般ajax跨域就是通过代理,JSONP或者CORS三种方式解决(注意,现在JSONP很少用了,所以了解下即可)

(1)JSONP方式解决跨域问题

jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍(实际项目中如果要使用JSONP,一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求)
实现原理
JSONP之所以能够用来解决跨域方案,主要是因为

你可能感兴趣的:(Ajax 跨域解决方案)