話不多說，一個字，幹！
前端配置如下：
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時，就不需要再進行預檢，可以直接發送一次請求。
最後
爲了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成爲全棧工程師，乃至架構師的路上披荊斬棘。在這裏給大家推薦一個前端全棧學習交流圈：866109386.歡迎大家進羣交流討論，學習交流，共同進步。
當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。
最後祝福所有遇到瓶疾且不知道怎麼辦的前端程序員們，祝福大家在往後的工作與面試中一切順利。