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 API学Jquery 之三 筛选
Apr 09 Javascript
Javascript 面向对象 重载
May 13 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 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
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python函数不定长参数使用方法解析
2019/12/14 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
GWT都有什么特性
2016/12/02 面试题
药学专业大学生自荐信
2013/09/28 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
诉前财产保全担保书
2014/05/20 职场文书
收费员岗位职责
2015/02/14 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Python源码解析之List
2021/05/21 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python