跨域请求如何携带cookie?

1. 一. 搭建一个跨域请求的环境
2. 二、解决跨域携带cookie问题
• 1. 在前端请求的时候设置 request 对象的属性 withCredentials 为 true;
• 2. 在服务端设置Access-Control-Allow-Origin
• 3. 在服务端设置Access-Control-Allow-Credentials
3. 结语

阅读本文，你将学到：

1. 学会withCredentials属性；
2. 学会 axios 配置withCredentials；
3. 学会设置Access-Control-Allow-Origin属性；
4. 学会设置Access-Control-Allow-Credentials属性；
5. 学会解决跨域请求携带源站 cookie 的问题；

一. 搭建一个跨域请求的环境

思路：

• 使用express搭建第一个服务A(http://localhost:8000)，运行在8000端口上；
• A服务托管index.html(用于在前端页面发送网络请求)文件；
• 在A服务中写一个处理请求的路由，加载index.html页面时，种下cookie(这里种cookie为了在请求B服务时携带上);
• 使用express搭建第二个服务B(http://localhost:8003)，运行在8003端口上；
• 在A服务托管的index.html页面去请求B服务，然后把cookie传过去；

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

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

结语

如何解决跨域问题？ 是面常考点，（常规的面试套路，一般都会顺着你的回答往深了问）然后面试官紧接着又问：那跨域请求怎么携带cookie呢？相信很多面试的小伙伴遇到过，希望本文对大家有帮助。