跨域請求cookie資源共享詳解

HTTP Cookie是服務器發送得用戶瀏覽器並保存在本地的一小塊數據，它會在瀏覽器下次向同一服務器再發起請求時自動攜帶併發送到服務器上。換句話說，http請求攜帶cookie只發生在同源請求時。對於跨域請求，要攜帶cookie該怎麼解決這個問題呢？

技術背景：@vue/cli ^3 + axios + typescript + webpack ^4

HTTP請求分爲簡單請求和預檢查請求，具體能夠參考 跨域資源共享CORS詳解

HTTP請求頭中幾個重要的標誌：

• General中：
• Request URL：請求接口
• Remote Address：請求的服務器地址
• Request Headers：
• Accept：接收信息的格式，application/json, text/plain
• Origin：簡單請求會自動加上的請求源
• Response Headers
• Access-Control-Allow-Credentials：可選的布爾值，表示是否容許發送cookie。設爲true，則服務器容許cookie能夠包含在請求中，不然不包括在cors請求中。

示例1(子域名不一樣)：

爲了實現單點登陸，網站A：child.aaa.com要跳轉到主站B：www.aaa.com/login進行登陸，並在登陸後再次跳回child.aaa.com，此時在往網站A種下domain爲aaa.com的cookie，以後再網站A發送主站B：www.aaa.com接口的Http請求並須要攜帶該cookie獲取access_token以驗證用戶身份。

解決方案：

1. withCredentials: true

除了服務器要同一可發送cookie以外，客戶端發起http請求時也須要同步打開withCredentials屬性。axios中具體寫法以下：

axios.defaults.withCredentials = true

示例2(主域名不一樣)：

爲了實現單點登陸，網站A：www.aaa.com要跳轉到主站B：www.bbb.com/login進行登陸，並在登陸後再次跳回www.aaa.com，此時在往網站A種下domain爲home.com的cookie，以後再網站A發送主站B：www.bbb.com接口的Http請求並須要攜帶該cookie獲取access_token以驗證用戶身份。

解決方案：

1. 首先withCredentials: true同上。

其次能夠使用webpack的proxy代理

devServer: {
    disableHostCheck: true,   // 若是存在host、hosts的交叉請求，則須要忽略webpack中host檢查
    proxy: {
        'api/': {
            target: 'www.bbb.com', // 最終請求的目標host
            changeOrigin: true, // 默認false，保存原host的header
            secure: false   // 默認true時，不接受https協議且證書無效的後端服務器
        }
    }
}複製代碼

這種方案因爲不檢查請求頭協議，會存在CSRP攻擊，只適合開發階段使用。

2. 服務器域名解析

能夠在服務器層，將aaa.com域名解析到bbb.com域名上，及在跳轉到主站B時，能夠請求www.aaa.com/login後有服務器重定向到www.bbb.com/login，接口請求時的原理同，此時調回子站A時cookie的domain是aaa.com，而接口請求時也會自主攜帶上cookie，不受瀏覽器跨域影響。