快捷導(dǎo)航

axios攜帶cookie配置詳解(axios+koa)

更新時(shí)間：2018年12月28日 11:47:14 作者：木子

這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

話不多說，一個(gè)字，干！

前端配置如下：

  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();
});

//防止每次請(qǐng)求都返回Access-Control-Allow-Methods以及Access-Control-Max-Age，
//這兩個(gè)響應(yīng)頭其實(shí)是沒有必要每次都返回的，只是第一次有預(yù)檢的時(shí)候返回就可以了。
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();
});

實(shí)例展示完了，我們來講講都是怎么回事

withCredentials:默認(rèn)情況下，跨源請(qǐng)求不提供憑據(jù)(cookie、HTTP認(rèn)證及客戶端SSL證明等)。通過將withCredentials屬性設(shè)置為true，可以指定某個(gè)請(qǐng)求應(yīng)該發(fā)送憑據(jù)。

默認(rèn)值為false。
true：在跨域請(qǐng)求時(shí)，會(huì)攜帶用戶憑證
false：在跨域請(qǐng)求時(shí)，不會(huì)攜帶用戶憑證；返回的 response 里也會(huì)忽略 cookie

當(dāng)配置了 withCredentials = true時(shí)，必須在后端增加 response 頭信息Access-Control-Allow-Origin，且必須指定域名，而不能指定為*?。。?/p>

那么問題就來了，若是多個(gè)域名呢？
我配置的是任意域名都可以訪問，但是這樣并不安全。建議做法是創(chuàng)建一個(gè)數(shù)組，每次去檢測(cè)域名是否在數(shù)組內(nèi)，存在則繼續(xù)

講到這里了，那么延伸一下 post請(qǐng)求下的options

options 它是一種探測(cè)性的請(qǐng)求，通過這個(gè)方法，客戶端可以在采取具體資源請(qǐng)求之前，決定對(duì)該資源采取何種必要措施，或者了解服務(wù)器的性能。

前臺(tái)跨域post請(qǐng)求，由于CORS（cross origin resource share）規(guī)范的存在，瀏覽器會(huì)首先發(fā)送一次options嗅探，同時(shí)header帶上origin，判斷是否有跨域請(qǐng)求權(quán)限，服務(wù)器響應(yīng)access control allow origin的值，供瀏覽器與origin匹配，如果匹配則正式發(fā)送post請(qǐng)求。

每一次非簡單請(qǐng)求都會(huì)實(shí)際上發(fā)出兩次請(qǐng)求，一次預(yù)檢一次真正請(qǐng)求，這就比較損失性能了。

所以就有了2圖的中間件。 Access-Control-Max-Age: 86400

設(shè)置一個(gè)相對(duì)時(shí)間，在該非簡單請(qǐng)求在服務(wù)器端通過檢驗(yàn)的那一刻起，當(dāng)流逝的時(shí)間的毫秒數(shù)不足Access-Control-Max-Age時(shí)，就不需要再進(jìn)行預(yù)檢，可以直接發(fā)送一次請(qǐng)求。

但是為什么會(huì)有兩個(gè)中間件的設(shè)置呢，推薦文章 http://www.dbjr.com.cn/article/135924.htm 很細(xì)致哦

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: