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

Posted 2020-09-17

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

 

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