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 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
AngularJS手动表单验证
Feb 01 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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
德生PL660的电路分析和打磨
2021/03/02 无线电
社区(php&&mysql)四
2006/10/09 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python中文件的读取和写入操作
2018/04/27 Python
python读取Excel实例详解
2018/08/17 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
学校采购员岗位职责
2014/01/02 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
活动总结报告范文
2014/05/04 职场文书
督导岗位职责范本
2015/04/10 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python