springboot web项目中 Set-Cookie 失败原因及解决办法

更新时间：2023年10月30日 15:50:02 作者：寂夜了无痕

这篇文章主要介绍了springboot web项目中 Set-Cookie 失败原因及解决办法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1. 背景

目前有个项目线上环境使用spring session管理的登录
项目中有两个接口

一个用来登录的登录成功后会设置cookie 后续请求就会使用该cookie （cookie的键值就是session Id 和登录后的信息例如菜单，权限等）

一个用来检查是否登录的根据session id 来判断是否登录没有登录信息的直接返回未登录

调用登录成功后发现Set-Cookie 出现响应头中但是调用检查接口发现还是还是未登录

如下图模拟登录接口响应中正确返回了 session

但是检查登录却未将模拟登陆返回的接口携带上导致登录校验失败

2. 问题排查

刚开始怀疑两次请求的session id 不一致导致无法使用模拟登录返回的cookie 但是在测试环境时可以校验登录接口正常使用模拟登陆返回的session

模拟登录的接口

验证登录的接口

那问题好像不是session不一致的问题。
因为目前使用spring-session来管理session 如果登录成功后会将session id 以及登录信息设置到cookie 同时存入到浏览器应用的 cookie中同时会将session 存入到 redis中其他的接口就会携带

那目前设置没问题那登录成功后是否将session 存入到到浏览器应用的cookie 直接去检查发现没有设置上

这里发现模拟登录成功后并没有将session 存入到浏览器应用的cookie中

那么问题就变成了为什么没有将session 存入到浏览器应用的cookie中

接下来就是一步步的修改
首先可以明确的是页面部署在A域名接口部署在B域名这种请求肯定是跨域的所以我们要在接口的NGINX中添加跨域配置

#在指定的接口路径中才添加
location /xxxx/ {
        add_header 'Access-Control-Allow-Origin' 'xxx';
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods'  '*';
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        #代理的配置 这个是虚拟网关的配置 每个项目不一定相同
        proxy_pass    http://gateway;
    }

修改过程中首先将登录接口中设置cookie 时增加sameSite 参数并设置值为None 表示允许在跨站点请求中发送

public static void setCookie(HttpServletResponse response, String cookieName, String value, int maxAgeExpiry) {
    //设置cookie 默认7天
    ResponseCookie cookie = ResponseCookie.from(cookieName, value)
            .httpOnly(true)		// 禁止js读取
            .secure(true)		// 在http下也传输
            .path("/")			// path
            .maxAge(maxAgeExpiry)
            // 新增加的部分 允许在跨站点请求中发送
            .sameSite("None")
            .build()
            ;
    // 设置Cookie Header
    response.setHeader(HttpHeaders.SET_COOKIE, cookie.toString());
    log.info("设置cookie完成,{}: {}", cookieName, cookie);
}

其次在前端 vue的页面调用接口时增加使用凭证参数由于使用的时 vue的 axios 请求框架直接在项目中增加配置即可 axios.defaults.withCredentials = true；
其他的方式添加方式如下

使用vue.resource发送请求时配置如下：
main.js中 Vue.http.options.xhr = { withCredentials: true }
使用vue.axios发送请求时配置如下：
axios.defaults.withCredentials = true；
jquery请求带上 xhrFields: {withCredentials: true}, crossDomain: true；
$.ajax({
type: "post",
url: "",
xhrFields: {withCredentials: true},
crossDomain: true,
data: {username:$("#username").val()},
dataType: "json",
success: function(data){ }
});

最后在接口的NGINX配置中同样添加使用凭证参数

add_header 'Access-Control-Allow-Credentials' 'true';

本来以为添加完应该可以正常请求了但是比之前错误更明显了接口都无法调用了

结果一看前端页面的控制台看到如下错误更有点百思不得其解
Access to XMLHttpRequest at ‘https://xxx/checkAuthorityUpdate’ from origin ‘https://xxx’ has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

居然提示请求头不被允许但是我的接口 nginx配置

add_header 'Access-Control-Allow-Headers '*';

这个配置意思应该是允许所有的请求头吧但是查询了下，看下ai的解释

这个错误提示是因为在进行跨域请求时，浏览器在发送实际请求之前会先发送一个预检请求（OPTIONS请求），这个请求包含了实际请求的所有信息，包括请求头。服务器在接收到这个预检请求后，需要返回一个响应，告诉浏览器哪些请求头是允许的。

在你的配置中，add_header ‘Access-Control-Allow-Headers’ ‘*’;设置的是允许所有请求头，但是浏览器在发送实际请求时，可能只发送了部分请求头，所以服务器需要明确指定允许哪些请求头。

你可以通过add_header ‘Access-Control-Allow-Headers’ ‘Content-Type, Authorization’;来指定允许的请求头为 “Content-Type” 和 “Authorization”。这样，浏览器在发送实际请求时，只有这两个请求头会被发送，服务器在接收到这个请求后，也会只检查这两个请求头，就不会出现这个错误了。

所以我们再次修改请求的配置

add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Accept-Language';

然后就大家都欢喜，校验登录的接口也可以正常使用模拟登录的session ，模拟登录的session也存入到了应用的cookie里

突然在测试某个功能更新接口居然提示跨域请求一看控制台发现 put 方法不被允许报错详细如下
access to XMLHttpRequest at ‘https://xxx/updateAuditResult’ from origin 'https://xxx has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

接口中的nginx配置

add_header 'Access-Control-Allow-Methods'  '*';

难道又是不允许* 我们改成具体的尝试下看看
修改为具体的method如下

add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE';

果然可以了，至此 set-cookie 问题解决完成

最后来汇总下解决办法

接口的nginx 跨域配置例如 headers和 method 中的* 配置修改为具体的

#xx为接口前缀 请注意配置 如果没有前缀可以放在 / 下
location /xxx/ {
        add_header 'Access-Control-Allow-Origin' 'xxx';
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Accept-Language';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE';
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_pass    http://gateway;
    }

接口中设置cookies的方法增加 samsite属性且属性值为None

public static void setCookie(HttpServletResponse response, String cookieName, String value, int maxAgeExpiry) {
    //设置cookie 默认7天
    ResponseCookie cookie = ResponseCookie.from(cookieName, value)
            .httpOnly(true)		// 禁止js读取
            .secure(true)		// 在http下也传输
            .path("/")			// path
            .maxAge(maxAgeExpiry)
            // 新增加的部分 允许在跨站点请求中发送
            .sameSite("None")
            .build()
            ;

    // 设置Cookie Header
    response.setHeader(HttpHeaders.SET_COOKIE, cookie.toString());
    log.info("设置cookie完成,{}: {}", cookieName, cookie);
}

在前端 vue的页面调用接口时增加使用凭证参数由于使用的时 vue的 axios 请求框架直接在项目中增加配置即可 axios.defaults.withCredentials = true；
其他的方式添加方式如下

使用vue.resource发送请求时配置如下：
main.js中 Vue.http.options.xhr = { withCredentials: true }
使用vue.axios发送请求时配置如下：
axios.defaults.withCredentials = true；
jquery请求带上 xhrFields: {withCredentials: true}, crossDomain: true；
$.ajax({
type: "post",
url: "",
xhrFields: {withCredentials: true},
crossDomain: true,
data: {username:$("#username").val()},
dataType: "json",
success: function(data){ }
});

另外登录成功session 不能生效问题有很多种包括但不仅限于如下

sessionID 不同问题前后两个请求的session不同请注意判断是否是真的不一致（例如说我在登录接口中将session设置成功并成功保存到了应用的cookie中然后在校验登录接口传入的sessionId 却是另一个这种就属于 sessionID 不一致的）
解决：这种问题不是很好找需要排查是代码问题还是使用的框架问题还是接口NGINX配置问题
set-cookie 失效参考文中解决办法
登录请求和校验请求 cookie设置的domin 和校验请求的domin不同这种也会导致检验请求无法使用登录请求设置的 cookie 不过这种通常出现在第三方授权中

nginx配置的 Access-Control-Allow-Origin 和实际的跨域地址不同这个在页面控制台会报错这个修改办法将NGINX配置修改为和实际请求的地址一样即可

Access to XMLHttpRequest at ‘https://xxx/checkAuthorityUpdate’ from origin ‘https://xxx:8068’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The ‘Access-Control-Allow-Origin’ header has a value ‘https://xxx’ that is not equal to the supplied origin

到此这篇关于springboot web项目中 Set-Cookie 失败办法的文章就介绍到这了,更多相关springboot 项目Set-Cookie 失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用SpringMVC 重写、扩展HttpServletRequest请求参数
这篇文章主要介绍了使用SpringMVC 重写、扩展HttpServletRequest请求参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-08-08
学习SpringMVC——如何获取请求参数详解
本篇文章主要介绍了SpringMVC——如何获取请求参数详解，详细的介绍了每种参数注解的用法。具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2016-12-12
Spring Boot 使用 Disruptor 做内部高性能消息队列
这篇文章主要介绍了Spring Boot 使用 Disruptor 做内部高性能消息队列,工作中遇到项目使用Disruptor做消息队列,对你没看错,不是Kafka,也不是rabbitmq。Disruptor有个最大的优点就是快,还有一点它是开源的哦,下面做个简单的记录
2022-06-06
Spring Boot Actuator管理日志的实现
本文主要介绍了Spring Boot Actuator管理日志的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
基于Java编写一个PDF与Word文件转换工具
前段时间一直使用到word文档转pdf或者pdf转word，寻思着用Java应该是可以实现的，于是花了点时间写了个文件转换工具，感兴趣的可以了解一下
2023-01-01
java stream distinct()如何按一个或多个指定对象字段进行去重
这篇文章主要介绍了java stream distinct()如何按一个或多个指定对象字段进行去重问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Spring @CrossOrigin 注解原理实现
这篇文章主要介绍了Spring @CrossOrigin 注解原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
SpringBoot调用外部接口的几种方式
SpringBoot应用中,调用外部接口是微服务架构常见需求,本文主要介绍了SpringBoot调用外部接口的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-10-10
SpringBoot整合Caffeine实现本地缓存的实践分享
缓存是提升系统性能的一个不可或缺的工具,通过缓存可以避免大部分重复的请求到数据库层,减少IO链接次数,提升整体的响应速率,本地缓存中比较常见的比如 Caffeine 缓存,这篇文章将结合具体的 Springboot 项目搭配 Caffeine 实现本地缓存的各种使用方式
2024-07-07
mapstruct的用法之qualifiedByName示例详解
qualifiedByName的意思就是使用这个Mapper接口中的指定的默认方法去处理这个属性的转换，而不是简单的get set，今天通过本文给大家介绍下mapstruct的用法之qualifiedByName示例详解，感兴趣的朋友一起看看吧
2022-04-04