为什么Cookie不能跨域访问? token怎么实现跨域访问?

Question

网上的博客都说cookie不能实现跨域访问,
但是我研究了CORS发现: 服务端响应头传回了Access-Control-Allow-Credentials: true, 则可以跨域传递cookie, 这要怎么解释 cookie不能跨域访问?

token既可以存放在Local Storage中, 也可以存放在cookie中, 那如果存放在cookie中, token是怎么实现跨域的呢?

Answer 1

不想多写，毕竟能参考的文档很多，个个都比我复制粘贴一遍好。

我就看文档瞎写下。

---

首先什么叫跨域，谁控制跨域。

浏览器处理跨域问题。如果当前访问站点 a.com，a.com上的脚本 a.js 尝试请求 api.b.com ，则出现跨域。跨的是域名（domain）。

跨域请求按是不是简单请求分为两种情况。

非简单请求：

1. 预检请求(pre-flight)，询问指定站点的跨域策略
2. 正式请求

简单请求则跳过预检。

预检中，服务器告诉浏览器自己的跨域策略：允许什么域名访问，允许以什么方法请求，是否允许附带身份验证等...

---

那么 cookies 能跨域吗？

答案可能比较奇怪，能。对于简单请求，浏览器不会预检，只要在 xhr 设置标志位 withCredentials，就能附带 cookies 发出 xhr 请求。

当附带 cookies 的 xhr 发出后，服务端可以用 Access-Control-Allow-Credentials 来控制浏览器要不要把响应体返回给 js 。如果没有设置 Access-Control-Allow-Credentials 则浏览器不会吧响应返回给发送者。

要让 cookies 跨域还有个要求就是 Access-Control-Allow-Origin 不能是 *，这也要求了服务器必须显式指定允许的跨域来源。

---

那 token 怎么实现的跨域呢？

首先还是要跨的目标要允许你跨。设置 Access-Control-Allow-Origin。如果 token 放在 HTTP Header 里则可能导致产生一个预检请求，如果放在 Cookies 里则可能不会产生预检。但最终都是要受到跨域策略限制的。

---

参考：

跨域资源共享(CORS) - MDN

Answer 2

你有两个站点，a.com,b.com,都设置了允许跨域访问
你现在要在a.com请求b.com的接口，
a.com请求的时候带的是a.com的cookie
b.com返回的时候cookie也是设置到b.com的。
正常情况你在a.com是获取不到b.com的cookie。
如果非要获取，可以设置同源策略，嵌套b.com脚本然后postmessage的方式获取，但是这种方式很极端只适用少部分情况。
正常的实现还是，前端请求api,api返回token,前端你可以存到cookie或者localStorage，请求api的时候手动获取token，追加到请求头中(可以是cookie，也可以是其他header头)即可。