解決CORS跨域不能傳遞cookies的問題

故事背景

前端用的 vue + axios， 後端用的是 ko2，用 koa-passport + passport-local 幫我處理登陸註銷，用 koa-generic-session 處理session， koa2-cors 處理跨域

問題描述

今天作登陸的時候，發現 接口調用正常，數據正常傳遞，redis裏也有存儲相應值 惟獨前端頁面一直沒有設置上cookies，沒法保存登陸狀態。

使人崩潰的解決過程

以前在測試功能的時候，能看見cookie被設置上了，而後我就覺得是我這幾個庫沒寫對，翻騰來翻騰去，怎麼搞都不對，明明和網上的如出一轍，但就是拿不到cookie。 搗鼓了幾個小時，心態都崩了。

後來又從新起了一個項目A，直接設置cookie，直接瀏覽器訪問接口，cookie看見了。

用前端調用這個接口，cookie仍是有(這裏忘記清除cookie記錄了，本地跑的時候都是localhost)（暴躁老哥）

而後又陷入 懷疑調用庫api出錯的死循環（崩潰邊緣）

而後又試了一下前端調用項目A的接口，cookie沒了？（清過cookie）， 驚了，怎麼一下子有一下子沒的。

而後屢次測試，總算髮現，我直接訪問接口能設置上cookie，可是前端請求拿不到。

ok，總算找到真正的緣由了，而暴躁老哥到這一步的時候已經從下午搞到晚上了。

---

參考：

非空騎跡 - React，koa2先後端分離項目涉及cookie傳遞的方法

liyuling52011 - Vue 加入 withCredentials 後沒法進行跨域請求

---

爲何會有這樣的問題？

前端 localhost:8080 訪問後端 localhost:3000 會出現跨域的問題，我採用的是cors來解決。

可是同時也產生了沒法傳遞cookies的狀況，緣由以下

默認狀況下，跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證實等)

若是發送的是帶憑據的請求，但服務器的相應中沒有相關的頭部，那麼瀏覽器就不會把相應內容交給JavaScript,請求就沒法獲得結果的數據（瀏覽器獲得了，可是咱們請求的方法得不到，由於被瀏覽器攔截了）

如何解決

爲此，在後端 CORS處理 時，設置相應的Header：

// 響應頭表示是否能夠將對請求的響應暴露給頁面
Access-Control-Allow-Credentials: true
// 容許跨域操做的具體域名
Access-Control-Allow-Origin: "http://localhost:8080"
// 容許跨域的HTTP方法
Access-Control-Allow-Methods: ["GET","POST","DELETE"]
// 列出將會在正式請求的 Access-Control-Expose-Headers 字段中出現的首部信息
Access-Control-Allow-Headers: ["Content-Type", "Authorization", "Accept"]
複製代碼

而後在前端也做出以下處理：

// 表示跨域請求時是否須要使用憑證
axios.defaults.withCredentials = true
複製代碼

@留一杯阿，通過這位老哥提醒，若是設置 Access-Control-Allow-Origin: * ，無論withCredentials有沒有設置，cookie也帶不過去

---

問題解決

解決問題花了這麼久的時候，歸根到底，仍是過於暴躁，心態崩盤，外加不紮實的計算機網絡基礎。 :<