继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CORS 跨域携带 Cookie 发送请求

繁星点点滴滴
关注TA
已关注
手记 217
粉丝 67
获赞 333

问题

当在 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

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP