Angularjs之如何在跨域请求中传输Cookie的方法


Posted in Javascript onJune 01, 2018

一般情况我们在使用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,这里不谈。

第一次请求到服务器后,会针对请求的下面三项进行赋值

  1. Access-Control-Allow-Origin
  2. Access-Control-Allow-Methods
  3. Access-Control-Allow-Headers"

浏览器接收到返回信息后,会再次发送请求,这次的Request Method是POST,这回就跟普通本域请求一样了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 #Javascript
详解vue-router 命名路由和命名视图
Jun 01 #Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 #Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
微信小程序登录换取token的教程
May 31 #Javascript
Rollup处理并打包JS文件项目实例代码
May 31 #Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 #Javascript
You might like
php+mysql事务rollback&commit示例
2010/02/08 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python创建学生管理系统
2019/11/22 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
酒店行政人事部经理职务说明书
2014/02/26 职场文书
小摄影师教学反思
2014/04/27 职场文书
广告宣传策划方案
2014/05/21 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2014年实习生工作总结
2014/11/27 职场文书
党章学习心得体会2016
2016/01/14 职场文书
小学科学课教学反思
2016/02/23 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android