axios携带cookie配置详解(axios+koa)


Posted in Javascript onDecember 28, 2018

话不多说,一个字,干!

前端配置如下:

axios.defaults.withCredentials = true; //配置为true
  
  axios.post('http://localhost:3000/tpzdz/vote/all', {
   openid: 'oJ0mVw4QrfS603gFa_uAFDADH2Uc',
   date: '2018-11-21'
  }).then(function (response) {
   console.log(response)
  })

前端配置withCredentials = true 后端的跨域也需要配置

app.use(async (ctx, next) => {
 ctx.set('Access-Control-Allow-Origin', ctx.request.header.origin);
 ctx.set('Access-Control-Allow-Credentials', true);
 await next();
});

//防止每次请求都返回Access-Control-Allow-Methods以及Access-Control-Max-Age,
//这两个响应头其实是没有必要每次都返回的,只是第一次有预检的时候返回就可以了。
app.use(async (ctx, next) => {
 if (ctx.method === 'OPTIONS') {
  ctx.set('Access-Control-Allow-Methods', 'PUT,DELETE,POST,GET');
  ctx.set('Access-Control-Max-Age', 3600 * 24);
  ctx.body = '';
 }
 await next();
});

实例展示完了,我们来讲讲都是怎么回事

withCredentials:默认情况下,跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。

  • 默认值为false。
  • true:在跨域请求时,会携带用户凭证
  • false:在跨域请求时,不会携带用户凭证;返回的 response 里也会忽略 cookie

当配置了 withCredentials = true时,必须在后端增加 response 头信息Access-Control-Allow-Origin,且必须指定域名,而不能指定为*!!!

那么问题就来了,若是多个域名呢?
我配置的是任意域名都可以访问,但是这样并不安全。建议做法是创建一个数组,每次去检测域名是否在数组内,存在则继续

讲到这里了,那么延伸一下 post请求下的options

options 它是一种探测性的请求,通过这个方法,客户端可以在采取具体资源请求之前,决定对该资源采取何种必要措施,或者了解服务器的性能。

前台跨域post请求,由于CORS(cross origin resource share)规范的存在,浏览器会首先发送一次options嗅探,同时header带上origin,判断是否有跨域请求权限,服务器响应access control allow origin的值,供浏览器与origin匹配,如果匹配则正式发送post请求。

每一次非简单请求都会实际上发出两次请求,一次预检一次真正请求,这就比较损失性能了。

所以就有了2图的中间件。 Access-Control-Max-Age: 86400

设置一个相对时间,在该非简单请求在服务器端通过检验的那一刻起,当流逝的时间的毫秒数不足Access-Control-Max-Age时,就不需要再进行预检,可以直接发送一次请求。

但是为什么会有两个中间件的设置呢,推荐文章 https://3water.com/article/135924.htm 很细致哦

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

Javascript 相关文章推荐
JQuery自动触发事件的方法
Jun 13 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 #Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 #Javascript
微信小程序时间控件picker view使用详解
Dec 28 #Javascript
微信小程序时间选择插件使用详解
Dec 28 #Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 #Javascript
Angular6新特性之Angular Material
Dec 28 #Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 #Javascript
You might like
Windows下安装Memcached的步骤说明
2010/04/25 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
js中运算符&& 和 || 的使用记录
2014/08/21 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python web框架学习笔记
2016/05/03 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python 列表理解及使用方法
2017/10/27 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
python 读取.nii格式图像实例
2020/07/01 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python中字典增加和删除使用方法
2020/09/30 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
教师工作表现自我评价
2015/03/05 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle