1、神马是跨域(Cross Domain)
一句话:同一个ip、同一个网络协议、同一个端口,三者都满足就是同一个域,否则就是
跨域问题了。而为什么开发者最初不直接定为一切可跨域的呢?默认的为什么都是不可跨域呢?这就涉及到了同源策
略,为了系统的安全,由Netscape提出一个著名的安全策略。现在所有支持JavaScript的浏览器都会使用这个策略。
所谓同源是,域名,协议,端口相同。当我们在浏览器中打开百度和谷歌两个网站时,百度浏览器在执行一个脚本的
时候会检查这个脚本属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行,如果没有同源策略,那
随便的向百度中注入一个js脚本,弹个恶意广告,通过js窃取信息,这就很不安全了。
说白点就是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)。
关于JavaScript能否跨域通信的详细说明,见下表:
http://www.a.com/a.js访问以下URL的结果
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/b.js | 同一域名,不同端口 | 不允许 |
https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://70.32.92.74/b.js | 域名和域名对应ip | 不允许 |
http://script.a.com/b.js | 主域相同,子域不同 | 不允许 |
http://a.com/b.js | 同一域名,不同二级域名(同上) | 不允许 |
http://www.b.com/b.js | 不同域名 | 不允许 |
2、为嘛要跨域
基于两个方面:
a. web应用本身是部署在不同的服务器上
b.基于开发的角度 --- 前后端分离
web应用本身是部署在不同的服务器上,对应的域名也就有所不同
比如百度。
二级域名:http://image.baidu.com/, http://music.baidu.com/,http://wenku.baidu.com/
需要在不同的域之间,通过ajax方式互相请求,是非常常见的需求。
基于开发的角度
现在提倡的前后端分离开发。
前端负责写html、css、js代码,需要向后台要数据,渲染到页面。
后台负责写业务逻辑,向前台提供数据。
后台提供的数据,作为前端如何才能拿到呢?
这就需要前后端进行协作。
后台,只负责提供API,就是一个ulr,比如,
http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973
前台,需要通过ajax发起请求,去获取数据。
在开发的时候,
后台的代码部署在一个服务器上。
前端的代码部署在另外一个服务器上。
前台在向后台通过ajax去请求数据的时候,就涉及到跨域。
就比如,我们的后台已经开发好了一个功能,获取当前首页面的轮播图中的电影数据,给前台提供的url如下:
http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973
我是前端开发人员,需要获取该数据,然后渲染到页面上。
此时,必须要使用ajax方式。
3、肿么跨域
关于跨域,有多达七八种方案。
其中有如下三种方案,是需要重点关注:
a. Cors
b. Jsonp(重点)
c.代理
Cors
本意:cross origin resource share,跨资源共享
场景:服务端的代码在我的控制范围之内,换言之,后台提供的api代码,我是有权限去操作的。只需要在服务端编写代码,浏览器端不用写任何代码。
这种方式最简单,只需要在服务端设置几个头信息即可。
在node中,设置如下:
res.setHeader('Access-Control-Allow-Origin', "*"); //针对哪个域名可以访问,*表示所有
res.setHeader('Access-Control-Allow-Credentials', true); //是否可以携带cookie
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
今天先给大家提供最简单的一种跨域方法,后续再为大家介绍更多及更重要的方法!