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 表示允许在跨站点请求中发送

java">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

java">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