Cookie的設定、讀取以及是否自動攜帶問題

碎碎醬發表於2018-07-29
Cookie

原文地址: github.com/yinxin630/b…
技術交流: fiora.suisuijiang.com/

這篇文章將解答以下疑問:

  1. 能設定或讀取子域的cookie嗎?
  2. 客戶端設定cookie與服務端設定cookie有什麼區別?
  3. 同域/跨域ajax請求到底會不會帶上cookie?

能設定或讀取子域的cookie嗎?

不行! 只能向當前域或者更高階域設定cookie

例如 client.com 不能向 a.client.com 設定cookie, 而 a.client.com 可以向 client.com 設定cookie

讀取cookie情況同上

客戶端設定cookie與服務端設定cookie有什麼區別?

無論是客戶端還是服務端, 都只能向自己的域或者更高階域設定cookie 例如 client.com 不能向 server.com 設定cookie, 同樣 server.com 也不能向 client.com 設定cookie

服務端可以設定 httpOnly: true, 帶有該屬性的cookie客戶端無法讀取

客戶端只會帶上與請求同域的cookie, 例如 client.com/index.html 會帶上 client.com 的cookie, server.com/app.js 會帶上 server.com 的cookie, 並且也會帶上httpOnly的cookie

但是, 如果是向服務端的ajax請求, 則不會帶上cookie, 詳情見第三個問題

同域/跨域ajax請求到底會不會帶上cookie?

這個問題與你發起ajax請求的方式有關

fetch在預設情況下, 不管是同域還是跨域ajax請求都不會帶上cookie, 只有當設定了 credentials 時才會帶上該ajax請求所在域的cookie, 服務端需要設定響應頭 Access-Control-Allow-Credentials: true, 否則瀏覽器會因為安全限制而報錯, 拿不到響應

axios和jQuery在同域ajax請求時會帶上cookie, 跨域請求不會, 跨域請求需要設定 withCredentials 和服務端響應頭

fetch 設定 credentials

By default, fetch won't send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set). Since Aug 25, 2017. The spec changed the default credentials policy to same-origin. Firefox changed since 61.0b13.

使fetch帶上cookie

fetch(url, {
    credentials: "include", // include, same-origin, omit
})
複製程式碼
  • include: 跨域ajax帶上cookie
  • same-origin: 僅同域ajax帶上cookie
  • omit: 任何情況都不帶cookie

developer.mozilla.org/en-US/docs/…

axios 設定 withCredentials

// withCredentials indicates whether or not cross-site Access-Control requests, should be made using credentials // default: withCredentials: false

使axios帶上cookie

axios.get('http://server.com', {withCredentials: true})
複製程式碼

github.com/axios/axios…

jQuery 設定 withCredentials

$.ajax({
    method: 'get',
    url: 'http://server.com',
    xhrFields: {
        withCredentials: true
    }
})
複製程式碼

yq.aliyun.com/articles/61…

相關文章