明确一下 XMLHttpRequest#withCredentials 的作用

先重复一下两个启用 withCredentials 之后 CORS 响应的要点:

  1. 响应头 Access-Control-Allow-Origin 不能为 *,必须明确指定为包含 Origin 的值。
  2. 响应头 Access-Control-Allow-Credentials 必须为 true

再重复一个 cookie origin 的问题:

请求发到哪个 origin,带的就是哪个 origin 的 cookie。不可能出现 a.com 携带 a.com 的 cookie 向 b.com 发 ajax 请求 的情况发生。

几个 case

  1. withCredentials 请求的响应操作 cookie,浏览器打开目标域网页输出 cookie:能获取到 cookie
  2. withCredentials 请求的响应操作 cookie,浏览器打开目标域网页输出 cookie:不能获取到 cookie
  3. withCredentials 请求的响应操作 cookie,withCredentials 请求读取 cookie:能获取到 cookie
  4. withCredentials 请求的响应操作 cookie,非 withCredentials 请求读取 cookie:不能获取到 cookie

结论

  • withCredentials 未启用时的 CORS 请求
    1. 请求不会携带任何 cookie。
    2. 响应不会影响任何本地 cookie 存储。
  • withCredentials 启用时的 CORS 请求
    1. 请求会携带目标 origin 的 cookie。
    2. 响应可以影响本地对应目标 origin 的 cookie 存储。

BTW,非 CORS 请求和响应都会正常携带和操作当前 origin 的 cookie。

其实很简单,总是被误导

提供一个 GitHub repo 用来验证和测试,可以使用 localhost:3000 打开网页,127.0.0.1:3000 发 Ajax。