十年網(wǎng)站開(kāi)發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶(hù) + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專(zhuān)業(yè)推廣+無(wú)憂(yōu)售后,網(wǎng)站問(wèn)題一站解決
這篇文章給大家分享的是有關(guān)axios如何攜帶cookie配置的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
前端配置如下:
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í)是沒(méi)有必要每次都返回的,只是第一次有預(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í)例展示完了,我們來(lái)講講都是怎么回事
withCredentials:默認(rèn)情況下,跨源請(qǐng)求不提供憑據(jù)(cookie、HTTP認(rèn)證及客戶(hù)端SSL證明等)。通過(guò)將withCredentials屬性設(shè)置為true,可以指定某個(gè)請(qǐng)求應(yīng)該發(fā)送憑據(jù)。
默認(rèn)值為false。
true:在跨域請(qǐng)求時(shí),會(huì)攜帶用戶(hù)憑證
false:在跨域請(qǐng)求時(shí),不會(huì)攜帶用戶(hù)憑證;返回的 response 里也會(huì)忽略 cookie
當(dāng)配置了 withCredentials = true
時(shí),必須在后端增加 response 頭信息Access-Control-Allow-Origin,且必須指定域名,而不能指定為*?。。?/p>
那么問(wèn)題就來(lái)了,若是多個(gè)域名呢?
我配置的是任意域名都可以訪(fǎng)問(wèn),但是這樣并不安全。建議做法是創(chuàng)建一個(gè)數(shù)組,每次去檢測(cè)域名是否在數(shù)組內(nèi),存在則繼續(xù)
講到這里了,那么延伸一下 post請(qǐng)求下的options
options 它是一種探測(cè)性的請(qǐng)求,通過(guò)這個(gè)方法,客戶(hù)端可以在采取具體資源請(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)求。
每一次非簡(jiǎn)單請(qǐng)求都會(huì)實(shí)際上發(fā)出兩次請(qǐng)求,一次預(yù)檢一次真正請(qǐng)求,這就比較損失性能了。
所以就有了2圖的中間件。 Access-Control-Max-Age: 86400
設(shè)置一個(gè)相對(duì)時(shí)間,在該非簡(jiǎn)單請(qǐng)求在服務(wù)器端通過(guò)檢驗(yàn)的那一刻起,當(dāng)流逝的時(shí)間的毫秒數(shù)不足Access-Control-Max-Age時(shí),就不需要再進(jìn)行預(yù)檢,可以直接發(fā)送一次請(qǐng)求。
感謝各位的閱讀!關(guān)于“axios如何攜帶cookie配置”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線(xiàn),公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。