CORS 跨域携带 Cookie 发送请求

javascript/jquery

浏览数:744

2018-8-19

问题

当在 a.com 进行访问时,如何向 b.com 携带 b.com 的 cookie 发送一个请求?

情境

a.com 是一个第三方网站,需要通过访问 b.com 的接口来获取用户的一些信息。这时候,b.com 上的用户已经登录了。

跨域请求

我们知道,在发送跨域请求时,需要后端设置一些请求头,否则浏览器不会允许客户端跨域发送请求。

Access-Control-Allow-Origin: a.com

这样,a.com 便可以调用 b.com 的接口了。

但是,这样调用过去会发现,b.com 会返回用户未登录。原因是 b.com 的 cookie 没有发送过去。

跨域携带 Cookie

这时候需要后端添加另外一个请求头:

Access-Control-Allow-Credentials: true

前端在发送请求时也需要设置

xhr = new XMLHttpRequest();
xhr.withCredentials= true;  //关键句
xhr.open("GET", url);
xhr.send();

这样,后端就可以接收到前端携带的 Cookie 了。

总结

综上所述,前端需要在发送 XMLHttpRequest 的时候加上

xhr.withCredentials= true;

后端需要设置请求头(表示你信任 a.com 并允许 a.com 带上你的凭据):

Access-Control-Allow-Origin: a.com //这里需要换成相应的发起请求的域名
Access-Control-Allow-Credentials: true

原文地址:https://segmentfault.com/a/1190000016032594