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 27 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
js实现列表按字母排序
Aug 11 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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
php实现分页显示
2015/11/03 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
学习jQuey中的return false
2015/12/18 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python中的__slots__使用示例
2015/02/26 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python中的默认参数详解
2015/06/24 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
编辑找工作求职信分享
2014/01/03 职场文书
关于爱情的广播稿
2014/01/16 职场文书
初中语文教学反思
2014/02/02 职场文书
雷人标语集锦
2014/06/19 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书