AngularJS通过CORS实现跨域方案(2)

这里还有一处需要前端工程师协作的地方就是cookie的传递,默认情况下通过CORS这样的方式是不会传递cookie.一般强制性将cookie添加到header的做法,也会被浏览器拒绝并报错.上面看到了在服务器端会通过添加一个response头,Access-Control-Allow-Credentials来控制是否允许Cookie的提交.

    在Angular中我们需要进行一些设置达到目的:

$http.post(url, {withCredentials: true, ...})

// 或者

$http({withCredentials: true, ...}).post(...)

// 或者

.config(function ($httpProvider) {

$httpProvider.defaults.withCredentials = true;

}

如果是jQuery则要设置如下:

$.ajax("www.cros.com/api/data", {

type: "GET",

xhrFields: {

withCredentials: true

},

crossDomain: true,

success: function(data, status, xhr) {

}

});

    CORS的过程描述完毕,在网上找到一张图片:

 

    CORS的分类

    如果仔细观察浏览器的行为会发现,并不是所有的跨域请求都会发送OPTIONS请求.是不是有些奇怪,这就涉及到CORS的分类,简单请求和复杂请求.

    HTTP的header通常包含下面这些内容:

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type的值仅是下列之一:

application/x-www-form-urlencoded

multipart/form-data

text/plain

    HTTP方法是HEAD,GET,POST之一,同时HTTP的header包含如上面所示.任何一个不满足这两种要求的请求,都是复杂请求.比如发送PUT,DELETE等HTTP动作,或者Content-Type: application/json的内容.

    只有复杂请求包含"预检"这一动作,另外Access-Control-Max-Age应该也会影响OPTIONS请求的发送.

带你走近AngularJS系列：

带你走近AngularJS - 基本功能介绍 

带你走近AngularJS - 体验指令实例 

带你走近AngularJS - 创建自定义指令 

如何在 AngularJS 中对控制器进行单元测试 

在 AngularJS 应用中通过 JSON 文件来设置状态 

AngularJS 之 Factory vs Service vs Provider 

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 

AngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里