Angularjs之如何在跨域请求中传输Cookie的方法
更新时间：2018年06月01日 09:34:42 作者：yexiaomai77
跨域传输Cookie是需要后台和前台同时做相关处理才能解决的，这篇文章主要介绍了Angularjs之如何在跨域请求中传输Cookie的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一般情况我们在使用WebApi之类的技术时，都会遇到跨域的问题，这个只需要在服务端做一下处理即可。
如果这些GET或POST请求不需要传递Cookie数据的话，就没什么问题了，但如果需要，那么会发现 虽然已经处理了跨域请求的问题，但后台始终无法获取到Cookie。
跨域传输Cookie是需要后台和前台同时做相关处理才能解决的。
就好比一个握手会话，前台先表示，我的跨域请求是带有Cookie的；请求到了服务端，服务端表示可以接收跨域Cookie，成交（开始重新带着Cookie发起请求）
后台代码
Response.Headers.Add("Access-Control-Allow-Credentials", "true");
前台代码
$http.post("http://a.domain.com/Api/Product", { productId: 3 }, {
withCredentials: true,
params: { name: "Ray" },
headers: {'Authorization':"这个不重要"}
}).success(function (data) {
//TODO
});
这个是在单独的请求中设置，如果要在所有的请求中都应用该设置则要使用 $httpProvider
angular.module("app").config(function ($httpProvider) {
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.headers.common['Authorization'] = "89757";
})
如果使用jQuery，则是这样子的
$.ajax({
type: "POST",
url: "http://a.domain.com/Api/Product",
xhrFields: {
withCredentials: true
},
success: function (data) {
console.log(data)
},
error: function (data) {
console.error(data)
}
})
撇开Cookie跨域传输的问题，angularjs的跨域POST请求与jQuery有些区别：
jQuery跨域与本域的区别仅仅是请求头信息的变化；
angularjs跨域后，会变成两次请求，第一次的Request Method是OPTIONS，这里有个概念叫preflight，这里不谈。
第一次请求到服务器后，会针对请求的下面三项进行赋值
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers"
浏览器接收到返回信息后，会再次发送请求，这次的Request Method是POST，这回就跟普通本域请求一样了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
ui-router中使用ocLazyLoad和resolve的具体方法
这篇文章主要介绍了ui-router中使用ocLazyLoad和resolve的具体方法，详细的介绍了ocLazyLoad和resolve的具体用法，非常具有实用价值，需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了angularjs实现首页轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
本篇文章主要介绍了详解angularjs 关于ui-router分层使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
Angular的Bootstrap(引导)和Compiler(编译)机制
这篇文章主要介绍了Angular的Bootstrap(引导)和Compiler(编译)机制的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
详解angularjs结合pagination插件实现分页功能
本篇文章主要介绍了详解angularjs结合pagination插件实现分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
表单是最常用的一种组建。在Angular.js中，其实并没有单独的为表单添加多少特殊功能。但是，利用Angular.js框架本身的特点，可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的2016-03-03
这篇文章主要介绍了Webpack 实现 AngularJS 的延迟加载的相关资料,需要的朋友可以参考下2016-03-03
本篇文章主要介绍了angular实现form验证实例代码，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
这篇文章主要介绍了创建你的第一个AngularJS应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了AngularJS中控制器函数的定义与使用方法,结合具体实例形式分析了AngularJS控制器函数的定义、绑定及相关使用技巧,需要的朋友可以参考下2017-10-10
最新评论