SameSite问题的兼容解决方案

最新推荐文章于 2025-10-14 11:57:15 发布
原创 最新推荐文章于 2025-10-14 11:57:15 发布 · 6.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #java #spring boot

本文探讨了在Vue和SpringBoot项目中遇到的线上环境接口访问问题，原因是Chrome80对SameSite策略的改变。为了解决跨域携带Cookie的问题，提出了两种方案：1）设置两套Cookie，分别兼容新旧浏览器；2）改用JWT，将token置于Header。这两种方案分别考虑了后端和前端的改造需求，帮助开发者应对浏览器兼容性挑战。

最近遇到了Vue+springboot项目发布在线上环境后，后台接口正常的情况一，vue一直请求提示网络错误而访问不到后台接口，最后找到了问题所在，是前端设置了：

config.headers['Set-Cookie'] = 'SameSite=None;Secure'，对于这个也不大明白，所以网上找到了如下说明：大概理解了这个思路。

对于未来chrome80 samesite问题的兼容解决方案

未来chrome80会默认(SameSite: lax)在跨域请求的情况下不允许跨域携带cookie给后端，导致所有跨域场景下使用cookie进行鉴权的服务会受到影响。

网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

但是设置了SameSite为None, 很难保证在非chrome浏览器上一定是兼容的，所以基于兼容性考虑有两个方案：

1.采用两套cookie 例如原cookie中已经种入了session-id=xxxxx，可以维持不变，再额外种入另一个cookie session-id-2=xxxxx同时设置特性SameSite为none secure: true。这样可以兼容新旧版的所有浏览器。这样就要求后端取得时候判断session-id不存在，再取cookie session-id-2的值

2.JWT方案，统一把token放在header的authorization，就不存在跨域携带cookie的困扰了

第一个方案主要适配在于后端，前端基本不需要变动，第二个方案需要前后端做一定的改造，视情况而定

彻底搞懂 Cookie SameSite 属性：从 Tomcat 到前端的全方位安全防护指南（2025 最新版）
专注于 Java 后端架构、微服务、分布式、前端及 AI 领域的技术分享，是开发者获取硬核知识、交流实战经验的专业博客。
08-01 1235
本文探讨了Cookie SameSite属性在2025年Web安全中的关键作用，并提供了全面的配置方案。文章指出未配置SameSite的Cookie存在严重安全隐患，可能导致CSRF攻击。解决方案涵盖后端Tomcat升级配置、自定义Java过滤器，以及前端JavaScript原生设置和封装工具库方法。针对不同技术栈，还提供了Django框架(未完整展示)等特定配置方案。通过RFC 6265和Chrome官方文档指导，帮助开发者从前后端全方位加强Cookie安全防护，确保用户数据安全。
chrome80默认SameSite导致iframe无法获取cookie问题解决方法
weixin_43827743的博客
03-04 4299
项目背景及问题定位 项目背景 A网站(假设为http://SameSite.a.com)作为iframe内嵌在B网站(假设为http://test.a.com)。在B网站中加载A网站的时候，自动登录失效，导致接口一直重调。 问题定位 初步分析，A网站为第三方页面，将A网站直接在外部打开可以单独访问，排除A网站的问题 更换浏览器，在火狐和Edge中，A网站可正常在iframe中加载。初步定位为浏览器兼容问题 对比不能正常加载和正常加载的chrome浏览器版本，都更新到最新的89版本。发现状态没变.
Cookie 的 SameSite 属性
日积月累的博客
11-22 7628
2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie，在灰度期间，就致使了阿里系的不少应用都产生了问题，为此还专门成立了小组，推进各 BU 进行改造，目前阿里系基本已经改造完成。全部的前端团队估计都收到过通知，也着实加深了一把你们对于 Cookie 的理解，因此极可能就此出个面试题，而即使不是面试题，当问到 HTTP 相关内容的时候，不妨也扯到这件事情来，一能代表你对前端时事的跟进，二还能借此引伸到前端安全方面的内容，为你的面试加分。前端。
一次跨域问题的解决经历（samesite）
菜鸟成长笔记
02-06 3194
1. 问题描述 生产和测试环境使用nginx做了反向代理，所以不存在跨域的问题，但是在本地研发环境，由于前后端分离，前端和后端在不同的电脑上开发，存在跨域问题。 前端使用的是vue，后端使用的是springboot。在前后端都做了跨域的设置，前端的设置为： //前端在vue的main文件全局添加一下代码： import axios from 'axios'; axios.defaults.withCredentials=true; 后端的设置为： import org.springframework.co
Chrome 配置samesite=none方式
m0_67400973的博客
08-01 3826
Chrome从70版本开始，出现了所谓的同源策略问题。80版本开始默认SameSite=Lax，导致跨域Cookie传输收到限制。我们遇到的问题是从其他网站跳转回来的时候，地址栏在正常地址的基础上出现了JSESSIONID=XXXXXXXXX,导致原有session失效。...
探索SameSite Cookie策略：GoogleChromeLabs的示例库深度解析
gitblog_00008的博客
04-27 540
探索SameSite Cookie策略：GoogleChromeLabs的示例库深度解析 在网络安全日益重要的今天，浏览器安全措施也不断升级。其中，SameSite属性是Cookie的一种新特性，用于防止跨站请求伪造（CSRF）攻击。GoogleChromeLabs为此提供了一个详尽的示例库：，帮助开发者理解和应用这一关键的安全机制。 项目简介 samesite-examples是一个开源项目，包...
cookie的sameSite
weixin_46773434的博客
11-16 585
项目场景： # 项目场景： 由于我的移动端项目是从微信那边获取的openId,在通过拿到openId获取人员信息，拿到openId只能在微信浏览器中打开，这就给我们调试造成了很大的困扰，不过我们PC端有登录接口，通过用户名密码可以拿到用户的信息，然后拿到cookie，在上移动端，通过cookie直接在我们自己服务上拿到信息，这就省略了从微信拿openId的步骤。 问题描述： 跨域cookie没种进去，请求也没携带cookie,如图 原因分析： 这里我们可以看到，响应头里返回了cookie 种在根路径
【浏览器安全策略】Chrome 83+跨域Cookie配置调整：SameSite默认策略禁用方案解决登录失效问题
最新发布
10-24
内容概要：本文主要介绍了Chrome浏览器80版本以上在跨域请求时因SameSite Cookie策略变更导致的登录失效问题，并提供了解决方案。由于Chrome默认启用了更严格的Cookie安全策略，导致部分前端应用在跨域场景下无法...
不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案.docx
10-26
- **SameSite Cookie属性**：设置Cookie的SameSite属性为"Lax"或"Strict"，限制Cookie在特定类型的跨站请求中发送，从而降低CSRF攻击的风险。 总之，前端开发者需要关注浏览器的兼容性问题，理解并应用如CORS和CSRF...
14、网页开发中的浏览器兼容性问题及解决方案
prometheus9mon的博客
10-14 32
本文详细探讨了网页开发中的浏览器兼容性问题，特别是针对IE6和IE7的常见布局与样式问题。通过Oh-Hai.com网站的实际案例，分析了由hasLayout引发的显示异常，并提供了包括触发hasLayout、修复浮动元素、调整字体与间距在内的系统性解决方案。文章总结了解决兼容性问题的流程与最佳实践，为前端开发者提供了实用的调试思路和技术手段。
【vue】跨域警告“此Set-Cookie标头未指定‘SameSite“届性，它默认为‘SameSite=Lax，必须为此SetCookie设置“SameSite=None“才能实现跨站点使用。”
九琼的博客
04-01 8059
此Set-Cookie标头未指定’SameSite"届性，它默认为’SameSite=Lax,"并被阻止，因为它来自跨站点响应，而不是对顶级导航的响应。必须为此SetCookie设置"SameSite=None“才能实现跨站点使用。不说了，这个困扰了我两天的问题，找了个大佬半分钟给我改好了。改完之后关闭项目，重新npm run dev一下，就好了。
vue django samesite proxy 403
weixin_50833946的博客
03-24 504
target: 'http://127.0.0.1:8180/project',//代理地址，这里设置的地址会代替axios中设置的baseURL。2 vue使用proxy代理，转发axios请求到django后端，django服务报403 Forbidden.changeOrigin: true,// 如果接口跨域，需要进行这个参数配置。1 vue前端，使用axios直接访问 django后端， chrome报samesite错误。搜索了很久才找到解决办法，备份下，以备需要的人借鉴。
跨域cookie失效问题 SameSite=None和secure
烟溪彭于晏的博客
11-11 8445
跨域使用cookie遇到的天坑，客户端在给服务器发送请求的时候需要携带cookie，因为前后端分离有跨域问题，chrome和edge要跨域携带cookie的话需要设置cookie的SameSite = None，同时又要求设置了cookie的SameSite = None就必须设置cookie的secure=true，如果设置了secure=true 理论上必须是Https协议才会携带cookie.为了所有浏览器可以使用Http协议携带cookie，后续使用nginx，不进行跨域了。
Cookie的SameSite属性
热门推荐
qq_36690992的博客
06-16 2万+
SameSite 属性 Chrome 51 开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击 和用户追踪（第三方恶意获取cookie），限制第三方 Cookie，从而减少安全风险。 SameSite属性可以设置三个值：Strict、Lax、None。 Strict：严格，完全禁止第三方获取cookie，跨站点时，任何情况下都不会发送cookie；只有当前网页的 URL 与请求目标一致，才会带上 Cookie。这个规则过于严格，可能造成非常不好的用户体验。比如，
ThinkPHP跨域设置”samesite=none”和“secure”参数的方法和注意事项
wbryze的博客
03-29 3706
因开发插件需要，将另一个网站的数据通过AJAX添加到ThinkPHP制作 的一个网站上的购物车。 需要网站支持跨域请求同步COOKE，具体操作如下： /public/index.php 第二行添加以下代码： ACAO=′∗′;header("Access−Control−Allow−Credentials:true");//允许COOKIE共享header("XDomainRequestAllowed:1");//允许COOKIE共享IEif(!empty(ACAO = '*'; header("Acces
node的express-session设置sameSite和secure不生效且session丢失
wzp20092009的博客
04-15 1644
一般在node环境里，设置跨域请求需要配置sameSite和secure的值，但以下配置往往不生效。
Springboot应用中设置Cookie的SameSite属性，跨域支持
seapeak007的博客
02-07 1万+
转自：Springboot应用中设置Cookie的SameSite属性 - SpringBoot中文社区 - 博客园 Cookie除了key和value以外有几个属性。 httpOnly是否允许js读取cookie secure是否仅仅在https的链接下，才提交cookie domaincookie提交的域 pathcookie提交的path maxAgecookie存活时间 sameSite同站策略，枚举值：StrictLaxNone 其他的都很熟悉了，最后一个是 Chro...
记一次浏览器SameSite策略更新，导致接口 Failed to load response data 的解决过程
liyoro的专栏
01-22 5299
浏览器SameSite策略更新，会导致前端不发送Cookie，造成接口不返回数据，也就是Failed to load response data问题
如何在Chrome浏览器中临时修改SameSite=None和Secure
pocher的博客
06-13 1732
如何在Chrome浏览器中临时修改SameSite=None和Secure
electron 如何解决Cookie SameSite限制
02-28
<think>好的，我现在需要帮助用户了解Electron如何解决Cookie的SameSite限制。首先，我得回忆一下SameSite属性是什么，以及它在浏览器中的作用。SameSite是Cookie的一个属性，用来防止CSRF攻击，控制Cookie是否随跨站请求发送。它有Strict、Lax和None三个值，None需要Secure属性。 接下来，用户的问题是Electron如何处理这个限制。Electron应用使用Chromium作为核心，所以默认情况下应该遵循SameSite规则。但用户可能遇到需要绕过的情况，比如跨域请求携带Cookie。这时候，我需要考虑Electron提供的API或配置选项。 我记得Electron的session模块可以管理Cookie。可能需要通过session.setCookie或修改请求头来设置Cookie的属性，比如SameSite=None和Secure。同时，需要检查Electron的版本，因为Chromium的SameSite默认行为在不同版本可能不同，比如Chrome 91之后默认Lax。 另外，用户可能需要修改WebPreferences中的设置，比如设置webSecurity选项，但这可能影响安全性。或者通过拦截请求，修改请求头中的Cookie信息，确保SameSite=None。同时，可能需要处理协议的问题，因为Secure属性需要HTTPS，本地开发可能使用HTTP，需要配置Electron允许不安全来源。 还需要注意，Electron的主进程和渲染进程之间的通信，可能需要通过IPC来同步Cookie的设置。此外，第三方库如electron-cookies可能简化操作，但需评估安全性。 最后，要提醒用户虽然可以绕过SameSite限制，但需谨慎，因为这可能带来安全风险。总结步骤应该是检查版本，使用session API设置Cookie属性，调整WebPreferences，处理协议，并在必要时拦截请求修改头信息。</think>以下是 Electron 解决 Cookie SameSite 限制的详细方案： 1. **理解 SameSite 限制本质** - 自 Chrome 91 起 SameSite 默认设为 `Lax` - 跨域请求默认不会携带 Cookie - `SameSite=None` 必须配合 `Secure` 属性使用 2. **通过 Session API 强制设置 Cookie** ```javascript const { session } = require('electron') const setCookie = async () => { const cookie = { url: 'https://yourdomain.com', name: 'test_cookie', value: '123', secure: true, sameSite: 'no_restriction' // 对应 SameSite=None } await session.defaultSession.cookies.set(cookie) } ``` 3. **修改 WebPreferences 配置** ```javascript mainWindow = new BrowserWindow({ webPreferences: { webSecurity: false, // 慎用！会降低安全性 nodeIntegration: true, contextIsolation: false } }) ``` 4. **请求拦截处理（主进程）** ```javascript const { session } = require('electron') session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => { details.requestHeaders['Cookie'] = 'your_cookie=value; SameSite=None; Secure' callback({ requestHeaders: details.requestHeaders }) }) ``` 5. **HTTPS 强制处理方案（针对开发环境）** ```javascript app.commandLine.appendSwitch('ignore-certificate-errors') // 忽略证书错误 app.commandLine.appendSwitch('allow-insecure-localhost') // 允许本地不安全源 ``` **版本适配注意事项：** - Electron 12+ 对应 Chromium 89+，需显式设置 SameSite - 旧版本需添加 Chrome 兼容标志： ```javascript app.commandLine.appendSwitch('disable-features', 'SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure') ``` **安全建议：** 1. 生产环境必须使用 HTTPS 2. 尽量缩小 `webSecurity: false` 的使用范围 3. 定期更新 Electron 版本以获取最新安全补丁 4. 使用 `partition` 隔离高风险 Cookie： ```javascript const secureSession = session.fromPartition('secure-cookies') ``` **调试工具：** ```javascript // 在渲染进程控制台查看 Cookie console.log(document.cookie) // 主进程验证 Cookie 设置 session.defaultSession.cookies.get({}) .then(cookies => console.log(cookies)) ``` 替代方案：使用自定义协议 ```javascript protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { standard: true, secure: true, bypassCSP: true, allowServiceWorkers: true, supportFetchAPI: true } } ]) ``` 注意事项：此方案需要配套后端设置响应头 ``` Set-Cookie: flavor=choco; SameSite=None; Secure; Path=/ ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值