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 ui(接口)介绍
Sep 17 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
js 颜色选择插件
Jan 23 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php实现网页端验证码功能
2017/07/11 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python数值基础知识浅析
2019/11/19 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
SQL中where和having的区别
2012/06/17 面试题
信息管理应届生求职信
2014/03/07 职场文书
电子商务求职信
2014/06/15 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
冰峪沟导游词
2015/02/09 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python