xhr.withCredentials發送跨域請求憑證

1、前言

　今天遇到一個坑，瀏覽器請求數據的時候gg了。瀏覽器報錯以下圖：

由於請求頭部設置了credentis mode is 'include', 從上面能夠看出是Access-Control-Allow-Credentials這個響應必須設置爲true。

 

2、思考

第一反應前端沒有設置過這個值啊？應該走默認纔對吧？測試環境OK啊！

---------------------------------真是一萬隻野馬狂奔而過啊-------------------------------------

因爲以前沒有遇到過這個問題，對這個也沒怎麼關注，因此排錯慢了點。


後面查了一下資料，而後迴歸一下代碼，oh my god！ 其餘前端寶寶在請求中設置了這個：（由於是合做開發，我也沒有注意這個，此處沒有甩鍋的ys）

config.withCredentials = true

那麼前端設置上面這個有啥用？那爲何加了就報錯呢？後臺難道沒有配合設置對應相應頭部嗎？

【後續想起】估計是後臺小哥哥說過：「前端最好給後臺傳cookie和token」 這句話吧，致使前端小哥哥加上了這個設置，不事後面後臺並無設置cookie。因此不必加啊，這就是信息不對稱致使結果吧。

 

3、原理及處理方法

一、標準的跨域請求是不會發送cookie等用戶認證憑據的，XMLHttpRequest 2的一個重要改進就是提供了對授信請求訪問的支持。也就是說，若是發生跨域請求，又想攜帶cookie到服務器，前端請求和後端響應都必須設置：

二、前端請求：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.xxx.com/api');
xhr.withCredentials = true;
xhr.onload = onLoadHandler;
xhr.send();

或者在axios請求配置中設置：

三、服務端響應頭：

Access-Control-Allow-Credentials: true

若是服務端不設置該響應頭，瀏覽器會報錯，固然響應會被忽略不可用；

同時，服務端需指定一個域名（Access-Control-Allow-Origin:www.xxx.com），而不能使用泛型（Access-Control-Allow-Origin: *）否則即便設置了該頭部，cookie開始不能轉到服務器。

 

4、總結

一、本次錯誤是由於前端配置了Credentials:true，可是瀏覽器沒有設置Access-Control-Allow-Credentials: true，且響應是Access-Control-Allow-Origin：*；

二、若是在跨域中但願瀏覽器能攜帶cookie到服務器，先後端都應該設置Credentials的值爲true, 且Access-Control-Allow-Origin就不能設爲星號，必須指定明確的，與請求網頁一致的域名。，否則cookie仍是不能攜帶過去；

三、Cookie依然遵循同源政策，只有用服務器域名設置的Cookie纔會上傳，其餘域名的Cookie並不會上傳，且（跨源）原網頁代碼中的document.cookie也沒法讀取服務器域名下的Cookie；

四、若是服務器不要瀏覽器發送cookie，先後端都不設置這個字段就行了。