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…