解決跨域請求無法攜帶Cookie的問題

問題描述

實現一個驗證碼的功能，前后端分離，前端 vue + axios 請求后端接口。服務端返回一個驗證碼的圖片同時將驗證碼存入session。

問題原因

在提交驗證的時候出現了無法取到session的問題，因為前端工程單獨啟動后的端口（localhost:8080）和后端服務采用的的端口(localhost:8000)不一致形成了跨域。http協議本身是無狀態的，需要憑證識別客戶端身份，而跨域請求又限制攜帶cookie等憑證，這么一來服務端便無法識別來訪對象，也就無法取到保存在session中的內容。

默認情況下，跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)
如果發送的是帶憑據的請求，但服務器的相應中沒有相關的頭部，那么瀏覽器就不會把相應內容交給JavaScript,請求就無法得到結果的數據（瀏覽器得到了，但是我們請求的方法得不到，因為被瀏覽器攔截了）

解決方法

后端

// 響應頭表示是否可以將對請求的響應暴露給頁面
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

解決方法參考：
解決CORS跨域不能傳遞cookies的問題