跨域 Cookie 共享

跨域请求经常遇到需要携带 cookie 的场景,为了确保跨域请求能够携带用户的认证信息或其他状态,浏览器提供了 withCredentials 这个属性。

如何在 Axios 中使用 withCredentials

为了在跨域请求中携带 cookie,需要在 Axios 配置中设置 withCredentials 为 true。

全局设置:

bash 复制代码
import axios from 'axios';

// 配置 axios 默认选项
axios.defaults.withCredentials = true; // 启用跨域请求时携带 cookie

// 或者在单独的请求中设置
axios.get('https://api.example.com/data', {
  withCredentials: true,  // 也可以在请求中单独设置
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

局部设置:

bash 复制代码
import axios from 'axios';

axios.get('https://api.example.com/data', {
  withCredentials: true,  // 确保跨域请求时携带 cookie
})
.then(response => {
  console.log('响应数据:', response.data);
})
.catch(error => {
  console.error('请求错误:', error);
});

后端:如何配置 CORS 以支持跨域请求携带 cookie:

前端配置好 withCredentials 后,后端需要确保响应头正确配置,以允许跨域请求携带 cookie。

  1. 设置 Access-Control-Allow-Origin
    Access-Control-Allow-Origin 头告诉浏览器哪些域是被允许跨域访问的。如果要支持跨域携带 cookie,这个头不能设置为 *,而必须指定一个明确的域。
bash 复制代码
Access-Control-Allow-Origin: https://www.example.com
  1. 设置 Access-Control-Allow-Credentials
    Access-Control-Allow-Credentials 头需要设置为 true,以允许浏览器在跨域请求中携带 cookie。
bash 复制代码
Access-Control-Allow-Credentials: true
  1. 设置 SameSite 和 Secure 属性
    为了确保 cookie 在跨域请求中能正常发送,服务器设置的 cookie 必须带上合适的 SameSite 和 Secure 属性:

SameSite=None:确保 cookie 在跨站请求时也会被发送。

Secure:要求 cookie 只能通过 HTTPS 协议发送。

bash 复制代码
Set-Cookie: user=JohnDoe; SameSite=None; Secure; domain=.example.com; path=/;
相关推荐
chuanauc几秒前
Kubernets K8s 学习
java·学习·kubernetes
持梦远方9 分钟前
C 语言基础入门:基本数据类型与运算符详解
c语言·开发语言·c++
一头生产的驴16 分钟前
java整合itext pdf实现自定义PDF文件格式导出
java·spring boot·pdf·itextpdf
YuTaoShao23 分钟前
【LeetCode 热题 100】73. 矩阵置零——(解法二)空间复杂度 O(1)
java·算法·leetcode·矩阵
zzywxc78726 分钟前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
DES 仿真实践家2 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
YuTaoShao3 小时前
【LeetCode 热题 100】56. 合并区间——排序+遍历
java·算法·leetcode·职场和发展
Code Warrior3 小时前
【每日算法】专题五_位运算
开发语言·c++
程序员张33 小时前
SpringBoot计时一次请求耗时
java·spring boot·后端