Fetch API 獲取 response cookie、模擬登錄獲取 cookie

在嘗試 Fetch API 模擬登錄時，碰到一個很納悶的事。就是明明瀏覽器的 Response Headers 中可以看到 set-cookie 字段。但卻無法獲取。

 

 

盡管我最終運行環境是在 Nodejs 下使用 node-fetch 運行的。但為了調試方便，我還是習慣先在瀏覽器控制台中使用 fetch 調試一下。

這就是最大的坑！

瀏覽器的 Fetch API 由於安全策略，是無法獲取 Response Headers 的 set-cookie 字段的。

https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_response_header_name

 

但是，在 Nodejs 環境下使用 node-fetch 是可以正常獲取的。

const fetch = require('node-fetch')

fetch("https://ikuuu.co/auth/login", {
    "headers": {
        "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36"
    },
    "body": "email=521573740%40qq.com&passwd=123456&code=&remember_me=on",
    "method": "POST",
    "mode": "cors",
    "credentials": 'include'
}).then(res => {
    // 獲取 cookie
    const cookie = res.headers.get('set-cookie')

    // 清理一下 cookie 的格式，移除過期時間，只保留基礎的鍵值對才能正常使用
    const real_cookie = cookie
        .replace(/expires=(.+?);\s/gi, '')
        .replace(/path=\/(,?)(\s?)/gi, '')
        .trim()

    // 帶着 cookie 發起請求
    fetch('https://ikuuu.co/user/checkin', {
        method: 'POST',
        // 加入 cookie
        headers: { cookie: real_cookie, },
        // 必須配置這個才可以攜帶 cookie
        credentials: 'include',
    }).then(res => res.json()).then(data => { 
        console.log(data) 
    })
})

 

如果我想在瀏覽器的 Fetch API 中獲取 cookie 怎么做？

其實既然是在瀏覽器中使用調試。那直接調用 document.cookie 獲取即可。盡管這樣做毫無意義。

fetch("https://ikuuu.co/auth/login", {
  "headers": {
    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36"
  },
  "body": "email=521573740%40qq.com&passwd=123456&code=&remember_me=on",
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
}).then(res => {
  console.log(document.cookie)
})