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

标签：简单   针对   如何   get   不同域   知识库   分离   通信   方案   

1、神马是跨域（Cross Domain）

说白点就是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的结果

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

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

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

标签：简单   针对   如何   get   不同域   知识库   分离   通信   方案   

原文地址：http://www.cnblogs.com/erwinyong/p/6833368.html