跨域请求如何携带cookie?不小心都拿了Offer

Posted 2023-03-03

参考技术A

最近在参加面试找工作，陆陆续续的面了两三家。其中面试官问到了一个问题：如何解决跨域问题？ 我巴巴拉拉的一顿说，大概了说了四种方法，然后面试官紧接着又问：那跨域请求怎么携带cookie呢？（常规的面试套路，一般都会顺着你的回答往深了问）由于之前的项目都是同源的，不牵涉跨域访问，所以一时没有回答出来，后来研究了下，所以有了这篇文章

阅读本文，你将学到：

思路：

先看下代码结构，相对比较的简单：

A 服务的代码：

index.html 的代码：

B 服务的代码：

首先我们先在 A 服务的 index.html 页面中得到一个 cookie ,运行 A 服务：

然后打开 http://localhost:8000/static/index.html : 没有问题的话，页面长这样：

这个时候 F12 打开控制台： 可以看到发送了一个 login 请求，并且设置了cookie,也可以选择浏览器控制台的 Application 页签，选中 cookie ，可以看到 cookie 的信息：

然后我们点击页面上的 发送同源请求 按钮，可以看到发送了一个user请求，并且已经携带上了cookie：

接下来刺激的画面来了，我们点击 发送跨域请求 按钮，出现了跨域请求的报错：

重点 ： 接下来开始解决跨域携带cookie问题：

什么是withCredentials？

XMLHttpRequest.withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。

如果在发送来自其他域的XMLHttpRequest请求之前，未设置withCredentials 为true，那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies，将会依旧享受同源策略，因此不能被通过document.cookie或者从头部相应请求的脚本等访问。

这个时候再去发送一个跨域请求，你会发现依旧报错，但是我们仔细看下报错，意思是需要设置header的 Access-Control-Allow-Origin 属性：

我们修改 B (app2.js)服务的代码：

修改完之后再次发送一个跨域请求，你会发现，又报错了(接近崩溃)，但是跟之前报的错不一样了，意思大概就是 Access-Control-Allow-Credentials 这个属性应该设置为 true ，但是显示得到的是个 \'\' ：

再次修改B服务的代码（每次修改后需要重新运行）：

再发送一个跨域请求：

可以看到，这个跨域请求已经请求成功并且返回数据了！而且也携带了A服务的cookie，这个时候已经大功告成了。