springboot web项目中 Set-Cookie 失败 办法

最新推荐文章于 2023-11-08 17:56:03 发布
最新推荐文章于 2023-11-08 17:56:03 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： java 文章标签： java session cookie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15835774652/article/details/134087813
版权

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 问题 解决完成

最后来汇总下解决办法

  1. 接口的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;
    }
  1. 接口中设置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);
}
  1. 在前端 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

  • 等等

god day ! ! !

寂夜了无痕
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Set-Cookie失效。response响应头中包含set-cookie。但是没有存储在本地cookie中的问题汇总。
梦一样的博客，神话般的感觉
04-03 1万+
小伙伴们在改造已有项目的时候会碰到自己的响应头中包含了set-cookie失效不起作用这类的信息。导致我们服务端的某些功能不能使用，比如“认证”，“权限”等。 小编在这里罗列一下可能发生的问题。共大家排查。 Domain问题 这是由于你返回的set-cookie指令中的Domain属性设置的值无法与你当前请求网站的域名相对应，所以浏览器忽略了set-cookie指令，没有存储在本地的cookie中。 例如：请求路径为localhost。但是set-cookie指令中的Domain属性设置为127.0.0
Set-Cookie: JSESSIONID=8AB51DC4244907FD9EBB063C7FD73CBA; Path=/; HttpOnly
11-20
Set-Cookie: JSESSIONID=8AB51DC4244907FD9EBB063C7FD73CBA; Path=/; HttpOnly 解决此类cookie暴露项目路径问题
cors-set-cookie-demo
05-31
CORS 跨域 Cookie 写入 场景 主页面在 foo.com:3000 域下 主页面 Ajax 请求 bar.com:3000 的 /set-cookie 请求，后者会在 bar.com 下写入一个 cookie 主页面 Ajax 请求 bar.com:3000 的 /echo-cookie 请求，后者会将 cookie header 中的值直接返回，让前端 js 可以读到 如何使用这个 Demo 编辑 /etc/hosts 增加: 127.0.0.1 foo.com 127.0.0.1 bar.com 浏览器中先访问 https://bar.com:3000/echo-cookie，忽略证书警告。 然后在浏览器中访问 https://foo.com:3000/public，可以看到 set cookie to bar.com 与 echo cookie from bar.com 是
set-cookie-parser:用于解析 HTTP set-cookie 标头的 Node.js 库
07-24
设置cookie解析器 将 set-cookie 标头解析为对象 接受单个set-cookie标头值、一组set-cookie标头值或可能具有 0 个或多个set-cookie标头的 Node.js 响应对象。 还接受一个可选的选项对象。 默认值： { decodeValues : true , // Calls dcodeURIComponent on each value - default: true map : false , // Return an object instead of an array - default: false silent : false , // Suppress the warning that is loged when called on a request instead of
Springboot中登录后关于cookie和session拦截问题的案例分析
09-07
主要介绍了Springboot中登录后关于cookie和session拦截案例,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
set-cookie 设置问题
weixin_42287935的博客
05-25 1万+
原文链接：PolarisHuster 从上面两个图我们可以看出，虽然浏览器端有cookie，为什么在发送list请求时没有把本地的cookie带上呢，再看下面的截图： 上面两个截图我们可以看出，上面的list请求带上了Cookie信息，那么你不仅会疑问什么情况下http请求会把cookie带上，什么时候http请求不带cookie信息呢，解答这个疑问之前先了解些cookie相关的基础性的东西： Set-Cookie响应头字段（Response header）是服务器发送到浏览器或者其他客户端的一些
cookie和set-cookie的区别及token值
z2768557792的博客
06-12 7432
请求头中的cookie和响应头的set-cookie的关系 Set-Cookie中的属性Domain限定给域下设置ctoken，然后现在页面所在域却是natapp.cc，所以有ctoken,此网络没有ctoken值，这就造成通过前端使用方法获取不到ctoken值。网络请求中的cookie与set-Cookie的交互模式和作用：1、当很多人访问统一网络服务器，服务器如何区分不同的用户sessionid，sessionid保证了浏览器和服务器唯一性的通信凭证号码，session保存在服务器上，sessionid
Cookie的基础知识
u010632547的博客
03-11 2230
创建cookie //1.创建Cookie对象 Cookie c = new Cookie("msg","hello"); //2.发送Cookie response.addCookie(c); 获取cookie Cookie[] cs = request.getCookies(); //获取数据，遍历Cookies if(cs != null){ for (Cookie ...
http协议（四）Set-Cookie
Niall_Tonshall的博客
03-22 5907
响应首部 Set-Cookie 被用来由服务器端向客户端发送 cookie。 1. 指令 <cookie-name>=<cookie-value> 一个 cookie 开始于一个名称/值对： <cookie-name> 可以是除了控制字符 (CTLs)、空格 (spaces) 或制表符 (tab)之外的任何 US-ASCII 字符。同时不能包含以下分隔字符： ( ) < > @ , ; : \ " / [ ] ? = { }. <cookie-v
Cookie原理、Set-Cookie常用字段、应用
FixedStar 的博客
02-21 2万+
保持网络状态、cookie全过程、set-cookie常用字段(value、expires、path、domain)、Cookie的用途（记录用户状态、购物车）、Cookie的限制
详解Vue用axios发送post请求自动set cookie
12-09
vue-resource不再维护之后，我也用起了axios，但是死活无法设置服务器发送过来的cookie 后来查询文档发现，这个是要单独配置的。 // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true的时候，axios就可以设置cookies了。 全局默认配置设置方法： axios.defau
vue项目中js-cookie的使用存储token操作
01-18
1、安装js-cookie # npm install js-cookie –save # yarn add js-cookie 2、引用（需要的文件） import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(tcuncuoken) { return Cookies.set(TokenKey, token) } export function re
set-cookie无法存入到浏览器cookie问题汇总
HenryXiao的博客
04-02 3万+
一、前言 最近在做一个前后端分离的自动化平台，由于环境部分还没搭建所以在本地启动前后端服务，开始接口联调，发现一个很有意思的问题，问了三个前端开发也没有解决；最后问题竟然出在一个小细节手中，还是要记录一下 前端地址：http://localhost:8080 后端地址：http://localhost:9090 二、后端基本代码配置 后端拦截器部分，不用多说做开发都应该知道 public ...
HTTP中的Cookie、Set-Cookie
XHT117的博客
08-21 3206
HTTP中的Cookie、Set-Cookie
记一次前后端分离项目跨域导致的set-cookie失效问题解决方案
最新发布
weixin_44928129的博客
11-08 720
起因公司项目使用了springsecurity的基础登录进行认证授权，而基础登录使用的是session+cookie的形式，项目前后端分离，前端调接口的时候就会出现，登陆后点击其他页面，提示未登录跳转登录页的情况，排查了一下问题发现登陆后请求投提示。前端用nginx用一个代码块分别将前端和后端都代理了一下，后端在服务器上也用nginx代理出来了了，看着挺复杂的，但是最终解决了问题。你有更好的解决方案吗？又想到项目用了session，应该是跨域，可以改token，但是也有其他的解决方案。
cookie详解
summer199605的博客
08-29 1399
http是无状态的，所以引入了cookie来管理服务器与客户端之间的状态 与cookie相关的http首部字段有： 1.Set-Cookie:它一个响应首部字段，从服务器发送到客户端，当服务器想开始通过cookie进行状态管理，它就会向客户端发送Set-Cookie字段。 2.Cookie:它是一个请求首部字段，从客户端发送到服务器 cookie是保存在客户端的，cookie是绑定在特定域名下的（...
部分浏览器 set-cookie 不成功踩坑记录
heidou_2016的博客
11-05 5913
在WEB应用中，对于敏感业务，如：登录或者付款，需要使用HTTPS来保证内容的传输安全，而在用户成功获得授权之后，获得的客户端身份cookie如果没有设置为Secure，那么很有可能会被非HTTPS页面拿到，从而造成重要的身份泄露。公司正在做一个sso的单点登录的项目，做完之后，在测试阶段，不同的终端的兼容测试时候，好几个不同的浏览器出现了不同的问题，有登录之后自动退出，有登陆不成功等问题。而最终引发问题的原因是 set-cookie 中的 samesite 的兼容性引起的。
后端的setCookie无法写入浏览器的问题
qq_36690992的博客
06-16 1万+
知识点： 后端通常称为session，是tomacat自带的验证方式，前端叫cookies的存储存这个cookies，有时效性，通常是后台设置（前端也可以设置，一般不）。也就是说业务上，如果使用cookies（session）登录、注销的话，一般就都是后台去控制了。只要保证前后端不跨域就可以。本地用代理配置，线上用nginx。 首先说下正常的大概流程： 1、前端通过img标签填入后台给的一个验证码图片地址，（如果cookies没有session这个字段）请求这个图片地址时候，图片接口会通过响应头respon
spring boot 配置freemarker及使用freemarker渲染页面
热门推荐
寂夜了无痕的博客
12-19 8万+
1.springboot 中自带的页面渲染工具为thymeleaf 还有freemarker 这两种模板引擎 简单比较下两者不同， 1.1freemaker 优点 freemarker 不足：thymeleaf由于使用了标签属性做为语法，模版页面直接用浏览器渲染，使得前端和后端可以并行开发。freemarket使用这样的语法，就无法直接使浏览器渲染出原本页面的样子。
perl Set-Cookie:UserID Set-Cookie:Password Set-Cookie:Expires Set-Cookie:Domain Set-Cookie:Path
05-30
要在 Perl 中设置多个 Cookie，可以使用 `CGI` 模块，并在 `header()` 函数中使用多个 `-cookie` 参数。例如，以下代码设置了名为 `UserID`、`Password` 的 Cookie，以及名为 `Expires`、`Domain`、`Path` 的 Cookie 属性： ```perl #!/usr/bin/perl use CGI qw/:standard/; # 设置多个 Cookie 和 Cookie 属性 print header( -cookie=>[ 'UserID=XYZ', 'Password=123', 'Expires=Sat, 01-Jan-2022 00:00:00 GMT', 'Domain=.example.com', 'Path=/' ] ); ``` 在上面的代码中，`-cookie` 参数是一个数组，用于设置多个 Cookie 和 Cookie 属性。`Domain` 参数用于设置可以访问 Cookie 的域名，以 `.` 开头表示可以被所有子域名访问，`Path` 参数用于设置可以访问 Cookie 的页面路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值