axios.defaults.withCredentials跨域携带cookie

作者：管理员 2021-05-07 10:19:44 分类：Vue2.js专栏阅读（1812） 0

withCredentials:默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。前端通过将withCredentials属性设置为true指定某个请求应该发送凭据

一、cors跨域

注意，如果端口不同的话，服务器是无法通过接口主动往客户端种下cookie，要么你先请求一个同源的接口让服务端种下cooie，或者前端可以通过登录接口拿到cookie手动种下，后续接口请求只需要withCredentials参数为true就可以自动携带给后端，具体案例

参数中设置

1
2
3
4
5
6
7
8
9
10
11
12

// 发送跨域请求
crossButton.onclick = function () {
axios({
method: "get",
withCredentials: true, // ++ 新增
url: "http://test.weipxiu.cn:8003/anotherService",
}).then((res) => {
console.log(res);
});
};
true：在跨域请求时，会携带用户凭证
false：在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie

main.js中设置

1 2	Vue.prototype.$axios = axios; axios.defaults.withCredentials = true;

注意：当配置了 withCredentials = true时，必须后端配置增加 response 头信息Access-Control-Allow-Origin，且必须指定域名，而不能指定为*
如果后端需要带cookie过去，前端需要设置为true

1
2
3
4
5
6
7
8
9
10
11
12
13

// 服务端需要配置：
// 响应头表示是否可以将对请求的响应暴露给页面
Access-Control-Allow-Credentials: true
// 允许跨域操作的具体域名
Access-Control-Allow-Origin: "http://localhost:8080"
// 允许跨域的HTTP方法
Access-Control-Allow-Methods: ["GET","POST","DELETE"]
// 列出将会在正式请求的 Access-Control-Expose-Headers 字段中出现的首部信息
Access-Control-Allow-Headers: ["Content-Type", "Authorization", "Accept"]

// 前端需要配置：
// 表示跨域请求时是否需要使用凭证
axios.defaults.withCredentials = true

二、前端代理

1
2
3
4
5
6
7
8

proxy: {
'/api': {
target: 'http://www.weipxiu.com', // 代理目标地址，有端口的带端口
changeOrigin: true, // 开启代理，在本地创建一个虚拟服务器
logLevel: 'debug', // node终端可以查看转发过程
rewrite: (path) => path.replace(/^\/api/, ''), // 配置重写规则，将接口中的/api去掉
},
},

三、前台js操作cookie的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

四、别人不知道的秘密

这个秘密经过一下午测试得到验证，假设我们ip地址相同但端口不同，例如127.0.0.1:3000和127.0.0.1:888; 那么这两个ip的cookie是可以共享的，但经过我通过域名测试，并不可以

二级域名cookie共享同上，解释下二级域名cookie共享，假设我们有一个一级域名.com,对应两个二级域名a.weipxiu.com/b.weipxiu.com，此时我希望在a.weipxiu.com登录后去请求b.weipxiu.com的接口，b下面可以拿到a的cookie，在这里我们需要在a下面配置domain，例如：/p>

1
2
3
4
5

// 设置`cookie`
app.get("/login", (req, res) => {
res.cookie("user", "lijun", { maxAge: 2000000, httpOnly: true, domain:"weipxiu.com" }); // 注意domain设置在相同的二级域名上
res.json({ code: 0, message: "登录成功" });
});

通过上面方式网上都说这样就实现了二级域名cookie共享，实际上也只是通过ip地址可以直接访问到，例如在a登录后，直接浏览器地址栏打开b的接口http://b.weipxiu.cn:8000/user，服务端接口内容如下：

1
2
3

app.get("/user", (req, res) => {
res.json({ code: 0, user: req.headers.cookie});
});

这样通过地址栏访问确实可以直接拿到a设置的cookie，但是我们前端开发实际肯定是在ajax中请求，例如：

1
2
3
4
5
6

// 获取cookie
crossButton.onclick = function () {
axios.get("http://b.weipxiu.cn:8000/user", {}).then((res) => {
console.log(res);
});
};

很抱歉，前端通过ajax去请求，啥也拿不到，这主要是浏览器自身做了拦截，解决方案自然还是按照cors或者代理方式来，在这里只是记录下网上说的二级域名cookie共享是怎么回事，大家几乎都没提到实际应用这个问题

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(0) 打赏

标签：

Axios 跨域

上一篇：bootstrap插件bootstrap-table-fixed-columns表格列左边右边固定及点击事件

下一篇：理财就是理生活，理财和不理财的区别会有多大？