axios照顾cookie设置（axios+koa）

2023年2月4日 220次阅读 来源: 木子

话不多说，一个字，干！

前端设置以下：

   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/… 很仔细哦

    原文作者：木子
    原文地址: https://segmentfault.com/a/1190000017535086
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞