解决ajax跨域的方法原理详解之Cors方法

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应用本身是部署在不同的服务器上,对应的域名也就有所不同

比如百度。

主域名:https://www.baidu.com/

二级域名: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');

今天先给大家提供最简单的一种跨域方法,后续再为大家介绍更多及更重要的方法!

上一篇:[BZOJ3207] 花神的嘲讽计划Ⅰ (主席树)


下一篇:100BASE-TX / 100BASE-T4/100BASE-FX