【客户端开发】electron 中无法使用 js-cookie 的问题

产生问题的原因

谷歌浏览器升级之后,出于安全考虑,cookie的SameSite属性默认值由None变为Lax,对于跨域的请求,禁止携带cookie。electron内核是chromium内核,所以也会有这个限制。

Cookie的SameSite属性用来限制第三方 Cookie,从而减少安全风险。它可以设置三个值:Strict、Lax、None

解决方法

基于上述原因,主要有两个解决方案,两个方案的本质其实都是将cookie的SameSite属性设置成None;

服务端设置

我们可以在nginx对应的location请求拦截中改变cookie属性,操作示例如下:

location /api {  proxy_pass http://**api/**/api;  proxy_set_header X-Real-IP $remote_addr;  proxy_set_header X-Scheme $scheme;  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  proxy_set_header Host $http_host;  #proxy_cookie_path /***/api /api;  # 解决谷歌浏览器升级后cookie跨域丢失问题  proxy_cookie_path /***/api "/api; httponly; SameSite=None";Secure}

客户端本地设置(推荐)

elctron 提供了一个可以设置cookie的方法,代码示例如下:

useCookie.js

const { app, session } = require('electron');/*** electron15 后,跨域cookie无法携带,* 以下为解决办法*/
function useCookie() {app.whenReady().then(() => {const filter = { urls: ['https://*/*'] };session.defaultSession.webRequest.onHeadersReceived(filter, (details, callback) => {if (details.responseHeaders && details.responseHeaders['Set-Cookie']) {for (let i = 0; i < details.responseHeaders['Set-Cookie'].length; i++) {details.responseHeaders['Set-Cookie'][i] += ';SameSite=None;Secure';}}callback({ responseHeaders: details.responseHeaders });});});
}module.exports = {useCookie,
};

main.js

const { useCookie } = require('./useCookie');
useCookie();

采用浏览器本地存储来存储(推荐)

不要使用 cookie 来存储 token 等信息,采用浏览器的 localStorage 和 seesionStorage 来存储

/** 统一处理 Cookie */const CacheKey = {TOKEN: 'Student-Token',
}
// import Cookies from 'js-cookie'export const getToken = () => {// return Cookies.get(CacheKey.TOKEN)return sessionStorage.getItem(CacheKey.TOKEN)
}
export const setToken = (token: string) => {// Cookies.set(CacheKey.TOKEN, token)sessionStorage.setItem(CacheKey.TOKEN, token)
}
export const removeToken = () => {// Cookies.remove(CacheKey.TOKEN)sessionStorage.removeItem(CacheKey.TOKEN)
}

参考

electron 升级后,无法携带cookie的问题
electron-vue中使用js-cookie遇到的问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59161.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux_shell编程

shell介绍 概念: 用户编写的shell命令通过shell解释器解释后交给linux内核去执行. shell是一个程序(解释器程序) 用户和linux内核的桥梁. Shell 是一个 C 语言编写的脚本语言&#xff0c;它是用户与 Linux 的桥梁&#xff0c;用户输入命令交给 Shell 处理 Shell 将相应的操作传…

Java 多线程(八)—— 锁策略,synchronized 的优化,JVM 与编译器的锁优化,ReentrantLock,CAS

前言 本文为 Java 面试小八股&#xff0c;一句话&#xff0c;理解性记忆&#xff0c;不能理解就死背吧。 锁策略 悲观锁与乐观锁 悲观锁和乐观锁是锁的特性&#xff0c;并不是特指某个具体的锁。 我们知道在多线程中&#xff0c;锁是会被竞争的&#xff0c;悲观锁就是指锁…

国内PLC市场份额报告,西门子老大的地位从未动摇

【导读】国内PLC市场占有率&#xff0c;西门子依然是老大。 PLC市场集中度很高&#xff0c;从销售额来看&#xff0c;TOP3厂家占据一半以上的市场份额&#xff0c;以外资品牌为主&#xff0c;其中西门子排名第一&#xff0c;2022年市场份额约47.1%&#xff1b;三菱排名第二&…

Redis有什么不一样?

Redis作为一种高性能的内存数据库&#xff0c;以其卓越的性能、丰富的数据类型和强大的功能特性&#xff0c;成为了许多应用的首选数据存储方案。本文介绍Redis内存数据库&#xff0c;并与其他常见的key-value数据库&#xff08;如Memcached&#xff09;进行比较&#xff0c;及…

环信鸿蒙IM SDK实现附件消息发送与下载

环信HarmonyOS IM SDK 正式版已经发布&#xff0c;该版本全面覆盖即时通讯&#xff08;IM&#xff09;的核心功能&#xff0c;为用户提供了完整的IM全功能体验&#xff0c;同时支持从Android APK到 NEXT 的数据迁移&#xff0c;更好地满足企业在不同业务场景下的适配需求。 点…

[二维前缀和]最大纯色正方形

题目描述 铺砖的工人来到一个操场&#xff0c;将整个操场按正方形铺砖&#xff08;整个操场可视为R行C列的矩阵&#xff0c;矩阵的每个元素为一块正方形砖块&#xff09;&#xff0c;正方形砖块有两种&#xff0c;一种为蓝色&#xff0c;另一种为红色。请你写一个程序求出为最…

每日OJ题_牛客_最长上升子序列(二)_贪心+二分_C++_Java

目录 牛客_最长上升子序列(二)_贪心二分 题目解析 C代码 Java代码 牛客_最长上升子序列(二)_贪心二分 最长上升子序列(二)_牛客题霸_牛客网 (nowcoder.com) 描述&#xff1a; 给定一个长度为 n 的数组a&#xff0c;求它的最长严格上升子序列的长度。 所谓子序列&#xf…

使用uniapp + Vue3 + uni.createInnerAudioContext()实现播放歌曲及歌词滚动、拖动进度条

一、大致效果 二、使用步骤 1.歌词详情页代码块 <template><view class"play"><view class"play_centent" :style"{ background-image: url( playInfo.siPic ) }"><div class"cover-mask" style"opacit…

无人机维护保养、部件修理更换技术详解

无人机作为一种精密的航空设备&#xff0c;其维护保养和部件修理更换是确保飞行安全、延长使用寿命的重要环节。以下是对无人机维护保养、部件修理更换技术的详细解析&#xff1a; 一、无人机维护保养技术 1. 基础构造理解&#xff1a; 熟悉无人机的基本构造&#xff0c;包括…

解决Redis缓存穿透(缓存空对象、布隆过滤器)

文章目录 背景代码实现前置实体类常量类工具类结果返回类控制层 缓存空对象布隆过滤器结合两种方法 背景 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库 常见的解决方案有两种&#xff0c;分别…

【运动的&足球】足球场景目标检测系统源码&数据集全套:改进yolo11-ASF-P2

改进yolo11-RetBlock等200全套创新点大全&#xff1a;足球场景目标检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.03 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或…

【STM32】GPIO通用输入输出口

文章目录 一、GPIO的概念二、STM32中GPIO的基本结构三、GPIO位结构输入部分分析输出部分分析GPIO的8种模式 四、GPIO相关函数 一、GPIO的概念 GPIO&#xff08;General Purpose Input Output&#xff09;&#xff0c;意为通用输入输出口&#xff0c;在嵌入式系统中&#xff0c;…

stm32疑难杂症之电压不够程序跑飞

在开发阶段&#xff0c;如果出现程序不断重启的情况。 首先先检查是不是代码问题。 1.数组越界。定义的数组只有50个单元&#xff0c;但是程序运行的过程中&#xff0c;却给他赋给50个单元。 2.中断耗时太长&#xff0c;刚出中断又进去了。这时的现象是程序一直在中断中执行…

华为荣耀曲面屏手机下面空白部分设置颜色的方法

荣耀部分机型下面有一块空白区域&#xff0c;如下图红框部分 设置这部分的颜色需要在themes.xml里面设置navigationBarColor属性 <item name"android:navigationBarColor">android:color/white</item>

电子电气架构 --- 整车控制系统

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所有人的看法和评价都是暂时的&#xff0c;只有自己的经历是伴随一生的&#xff0c;几乎所有的担忧和畏惧…

STM32 HAL库 SPI驱动1.3寸 OLED屏幕

目录 参考硬件引脚与接线 点亮屏幕CubeMX 配置OLED 驱动程序代码 参考 基于STM32F103C8T6最小系统板HAL库CubeMX SPI驱动7针 OLED显示屏&#xff08;0.96寸 1.3寸通用&#xff09;0.96 oled HAL库驱动 SPI STM32SPI驱动0.96/1.3寸 OLED屏幕&#xff0c;易修改为DMA控制STM32驱…

iOS 18.2 可让欧盟用户删除App Store、Safari、信息、相机和照片应用

升级到 iOS 18.2 之后&#xff0c;欧盟的 iPhone 用户可以完全删除一些核心应用程序&#xff0c;包括 App Store、Safari、信息、相机和 Photos 。苹果在 8 月份表示&#xff0c;计划对其在欧盟的数字市场法案合规性进行更多修改&#xff0c;其中一项更新包括欧盟用户删除系统应…

力扣11.2

2742. 给墙壁刷油漆 给你两个长度为 n 下标从 0 开始的整数数组 cost 和 time &#xff0c;分别表示给 n 堵不同的墙刷油漆需要的开销和时间。你有两名油漆匠&#xff1a; 一位需要 付费 的油漆匠&#xff0c;刷第 i 堵墙需要花费 time[i] 单位的时间&#xff0c;开销为 cost…

[前端] 为网站侧边栏添加搜索引擎模块

前言 最近想给我的个人网站侧边栏添加一个搜索引擎模块&#xff0c;可以引导用户帮助本站SEO优化&#xff08;让用户可以通过点击搜索按钮完成一次对本人网站的搜索&#xff0c;从而实现对网站的搜索引擎优化&#xff09;。 最开始&#xff0c;我只是想实现一个简单的百度搜索…

nodejs入门教程20:nodejs文件系统

1. 引入fs模块 在Node.js中&#xff0c;你可以通过以下方式引入fs模块&#xff1a; const fs require(fs);2. 文件操作 读取文件 异步读取&#xff1a;使用fs.readFile()方法。该方法接收文件路径和回调函数作为参数&#xff0c;回调函数在文件读取完成后被调用。 fs.rea…