layui怎么解决高版本浏览器中SameSite Cookie策略导致的丢失

阿伟君_9307

阿伟君_9307

2026-10-02

995人浏览

原创

samesite=none必须与secure=true配合且运行于https,否则浏览器静默丢弃;layui需手动配置credentials: 'include',spring boot须在application.yml中设same-site: none、secure: true并确保反向代理透传https上下文。

layui怎么解决高版本浏览器中samesite cookie策略导致的丢失

高版本 Chrome(80+)、Edge(80+)、Firefox(79+)中,layui 本身不管理 Cookie,但凡用到登录态、会话保持或跨域请求(比如 layui.table 调后端接口),只要后端返回的 Set-Cookie 缺少 SameSite 属性,就会被浏览器默认按 SameSite=Lax 处理——跨域场景下直接丢弃,导致后续所有请求无 Cookie,layui 看起来“突然登出”或接口反复 401。

后端响应头没设 SameSite=None + Secure 是根本原因

不是 layui 的 bug,是浏览器策略升级后的硬性拦截。检查 Network → 登录请求 → Response Headers → Set-Cookie 字段,如果只看到类似:

Set-Cookie: JSESSIONID=abc123; Path=/; HttpOnly

而没有 SameSite=None; Secure,那就确定是这个问题。常见于 Spring Boot、Laravel、ASP.NET Core 等框架未显式配置 SameSite 属性时。

必须同时满足三点才有效:

  • SameSite=None(显式声明,不能省略)
  • Secure=true(且实际运行在 HTTPS 上下文)
  • 前端发起请求时带凭证(credentials: 'include')

layui 的 AJAX 请求必须手动加 credentials

layui 默认所有 $.ajax 和组件内部请求(如 table.render、form.on('submit'))都不带 Cookie,除非你显式开启。它不自动继承浏览器默认行为。

全局设置(推荐放在 layui.use 外或入口 JS 最前):

$.ajaxSetup({ credentials: 'include' });

或单次调用时指定:

layui.table.render({ url: '/api/user/list', headers: { 'X-Requested-With': 'XMLHttpRequest' }, where: {}, method: 'get', contentType: 'application/json', done: function(res) { /* ... */ } });

注意:table 组件不支持直接传 credentials,所以必须靠 $.ajaxSetup 或改用 $.get/$.post 手动拉数据。

NotebookLM CLI Cookies
NotebookLM CLI Cookies

使用 nlm CLI 检索并回答已上传至 NotebookLM 的文档问题。适用于用户需要查找信息、总结来源或查询特定笔记本时。

下载

常见错误:

  • 只设了 withCredentials: true(这是原生 XMLHttpRequest 写法,layui 不认)
  • 用 fetch 封装了 layui 接口但忘了 { credentials: 'include' }
  • 本地开发用 http://localhost 却配了 SameSite=None; Secure → 浏览器静默丢弃(Secure 在 HTTP 下无效)

Spring Boot 项目里怎么配才真正生效

仅改 application.yml 不够,很多老项目漏掉关键项:

server:
  servlet:
    session:
      cookie:
        http-only: false
        same-site: none
        secure: true

但要注意:

  • same-site: none 必须小写,大写(如 None)在某些 Spring 版本下会被忽略
  • secure: true 在 Nginx 反向代理后必须透传 X-Forwarded-Proto: https,否则 Kestrel/Servlet 拿不到 HTTPS 上下文,Secure 不会写入响应头
  • 若用 Cookie 对象手动 set(如登录成功后 new Cookie(...)),javax.servlet.http.Cookie 原生不支持 SameSite,得用响应头方式注入:response.addHeader("Set-Cookie", "key=value; Path=/; SameSite=None; Secure; HttpOnly")

验证是否真生效:Network 中点开任意一个带 Set-Cookie 的响应,看 Response Headers 里是否完整出现 SameSite=None; Secure 在同一行 —— 缺一不可。

本地开发调试绕不过 HTTP?别硬刚 SameSite=None

Chrome 对 localhost 有例外:允许 SameSite=None; Secure=false(仅限 localhost 和 127.0.0.1),但必须关掉两个 flag:

  • chrome://flags#same-site-by-default-cookies → Disabled
  • chrome://flags#cookies-without-same-site-must-be-secure → Disabled

重启浏览器后生效。但这只是临时手段,上线前必须切回 HTTPS + Secure=true,否则生产环境照样失败。

真正容易被忽略的点:同一个域名下多个子应用(如 admin.example.com 和 api.example.com)要共享 Cookie,除了后端配 SameSite=None; Secure,还必须统一 domain 属性(如 domain=.example.com),否则浏览器认为不是同站,SameSite 规则照常触发。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2223

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4743

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5870

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5338

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

763

5

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

2023.06.30

11139

10

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.23

966

5

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

744

5

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

2025.08.19

1826

14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.6万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.8万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习