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

话不多说，一个字，干！

前端配置如下：

  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://www.jb51.net/article/135924.htm 很细致哦

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios

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

    话不多说,一个字,干! 前端配置如下: 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) }) 前端配置withCreden

  • vue3 axios 实现自动化api配置详解

    vue3 axios 实现自动化api配置详解

    目录 概述 示例 约定 请求 URL 的约定 请求传参的约定 分页列表,请求参数约定 分页列表 响应示例 响应码 code 的约定 请求跨域问题解决方案 全局配置 配置说明coder/config.js 模型配置 1.实现对一个实体进行增.删.改.查.导出.唯一性校验 2.只需要增.删.改.查中得某些操作,可以指定生成你需要的方法 3.自定义方法配置 4.指定请求接口地址前缀 概述 在实践中,我们发现上述的代码重复率非常高,新增和修改都费力,并且是没技术含量的体力活. 但又必须要这样做,不适合以

  • 详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）

    •基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 •vue2.0之后,就不再对 vue-resource 更新,而是推荐使用 axios,本项目也是使用 axios •功能特性 •在浏览器中发送 XMLHttpRequests 请求 •在 node.js 中发送 http请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换 JSON 数据 •客户端支持保护安全免受 CSRF/XSRF(跨站请求伪造) 攻击

  • vue全局使用axios的方法实例详解

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • vue-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • Jupyter Notebook 远程访问配置详解

    Jupyter Notebook 远程访问配置详解

    问题 Jupyter Notebook可以说是非常好用的小工具,但是不经过配置只能够在本机访问 笔者参阅了文档对jupyter notebook进行配置,实现了跨主机浏览器访问 安装jupyter notebook 笔者使用conda包管理 conda install jupyter notebook 生成默认配置文件 jupyter notebook --generate-config 将会在用户主目录下生成.jupyter文件夹,其中jupyter_notebook_config.py就是刚

  • Vue-Router的routes配置详解

    Vue-Router的routes配置详解

    目录 介绍 routes中对象属性 path: string component : Component | () => import(组件) name: string redirect: string | Location | Function props: boolean | Object | Function alias:  string| Array[string] children?: Array[RouteConfig] beforeEnter: (to: Route, from:

  • SpringBoot中shiro过滤器的重写与配置详解

    目录 问题 解决方案 实现代码 1.重写shiro 登录 过滤器 2.重写role权限 过滤器 3.配置过滤器 问题 遇到问题:在前后端分离跨域访问的项目中shiro进行权限拦截失效 (即使有正确权限的访问也会被拦截) 时造成302重定向错误等问题报错:Response for preflight is invalid (redirect) 1.302原因:使用ajax访问后端项目时无法识别重定向操作 2.shiro拦截失效原因:跨域访问时有一种带预检访问的跨域,即访问时先发出一条methods

  • Windows下RabbitMQ安装及配置详解

    Windows下RabbitMQ安装及配置详解

    目录 1.安装Erlang 2.安装rabbitmq rabbitMQ是一个在AMQP协议标准基础上完整的,可服用的企业消息系统.它遵循Mozilla Public License开源协议,采用 Erlang 实现的工业级的消息队列(MQ)服务器,Rabbit MQ 是建立在Erlang OTP平台上. 1.安装Erlang 下载地址:https://www.erlang.org/downloads,本文选择OTP 21.0.1 Windows 64-bit Binary File?(91707

随机推荐