這篇文章主要介紹了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 很細緻哦
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。