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

一、神马是跨域（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	不一样域名	不容许

 

二、为嘛要跨域

基于两个方面：

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方式。

 

三、肿么跨域

关于跨域，有多达七八种方案。

其中有以下三种方案，是须要重点关注：

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');

 

 今天先给你们提供最简单的一种跨域方法，后续再为你们介绍更多及更重要的方法！