fetch預設不攜帶cookie

最近在使用fetch向伺服器發送請求，過程中的體會和遇到的問題在這裡記錄一下。

fetch返回的是一個Promise對象，我們可以對返回的結果做進一步的處理，這是與傳統ajax的一個區別。

簡單的請求寫法如下：

fetch(url)
    .then(res => res.json())
    .then(json => {
        console.log(json);
    }) 

也可以設置method、headers、body等參數，詳見fetch api。

----------------------------------------------------------------------------------------------

接下來主要是關於fetch的一個坑，那就是fetch預設不會攜帶cookie。

我們在做判斷用戶是否已登錄等許可權問題的時候，有一種做法（這裡以express-session為例）是用戶登錄時將信息存入session

req.session.user = user;

此時，服務端會發送給客戶端相應的cookie

之後，來自客戶端的每一個請求，都會帶有這個cookie

而服務端通過這個cookie得到req.session.user（如果沒有cookie，那麼req.session.user === undefined），便可判斷用戶是否已登錄

if (!req.session.user) {
    console.log("未登錄");
}

使用fetch發送請求的我就這樣掉坑裡了。

想要解決這個問題其實很簡單，那就是在參數裡加一個欄位credentials: true，如：

fetch(url, {
    method: 'GET',
    credentials: 'include'
})

這樣，在一般情況下應該是沒問題了，沒錯，還有特殊情況，那就是跨域。

如果我們進行的是跨域請求而且是用CORS(對CORS不瞭解的可以看看這個)來處理的，那麼我們就需要在服務端設置一些欄位，比如：

'Access-Control-Allow-Origin', 'http://localhost:8080',  // 不能使用*，必須指定功能變數名稱，大概是出於安全考慮
'Access-Control-Allow-credentials', 'true'  // 表示允許發送cookie到服務端

到此為止問題就解決了。

如有不對，煩請指正