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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
Javascript函数的参数
Jul 16 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
js canvas实现橡皮擦效果
Dec 20 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 计划任务 检测用户连接状态
2012/03/29 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python并发编程之线程实例解析
2017/12/27 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
c语言常见笔试题总结
2016/09/05 面试题
远程研修随笔感言
2014/02/10 职场文书
解除劳动合同协议书
2014/09/17 职场文书
初中班主任教育随笔
2015/08/15 职场文书
创业计划书之美容店
2019/09/16 职场文书