axios 设置了 withCredentials = true 但还是不能带上 cookie 的问题

当使用axios设置withCredentials为true仍无法携带cookie时,问题通常在于浏览器的SameSite=Lax策略阻止了跨域cookie。解决方案包括修改浏览器设置或调整后端服务器的SpringSession配置,将SameSite设为None并启用Secure标志。此外,也可以在应用配置文件中设置相关参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

axios 设置了withCredentials = true 但还是不能带上cookie的问题

问题背景

axios 通过 withCredentials = true,让请求来携带 cookie,但浏览器依旧无法携带 cookie
报错信息
在这里插入图片描述

问题原因

简单的来说就是出现了跨域请求,但浏览器默认的SameSite=Lax是不支持跨域下cookie操作的。因此设置cookie失败。

解决办法

解决方法有很多,有通过代码解决的,可以通过设置浏览器来解决,但是不能要求所有用户都改浏览器设置

1. 更改浏览器
链接:https://pan.baidu.com/s/1x3bAMj_4kaJvnpmAouMzaQ
提取码:rwvv

打开谷歌浏览器,地址栏输入:chrome://extensions/然后打开开发者模式,把下载的拖进去

更详细的各个版本的解决方法看这里:完美解决Chrome Cookie SameSite跨站限制

2. 代码解决
方法一:添加一个SpringSession配置类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.session.web.http.CookieSerializer;
import org.springframework.session.web.http.DefaultCookieSerializer;

/**
 * spring-session配置
 *      将SameSite = Lax置为None
 *        Secure = true 解决
 * @description 解决SameSite=Lax导致前端无法携带Cookie的坑
 * @date 2023/4/4 20:14
 */
@Configuration
public class SpringSessionConfig {
    public SpringSessionConfig() {
    }

    @Bean
    public CookieSerializer httpSessionIdResolver() {
        DefaultCookieSerializer cookieSerializer = new DefaultCookieSerializer();
        // 取消仅限同一站点设置
        cookieSerializer.setSameSite("None");
        // 虽然设置了SameSite=None,但是还要设置Secure=true,浏览器才会携带cookie
        cookieSerializer.setUseSecureCookie(true);
        return cookieSerializer;
    }
}

方法二:在yml配置文件中添加配置

server:
  port: 8080
  servlet:
    context-path: /api
    session:
      cookie:
        domain: localhost
        same-site: none
        secure: true
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

在人间负债^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值