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

产生问题的原因

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

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

解决方法

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

服务端设置

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

js 复制代码
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

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

js 复制代码
const { useCookie } = require('./useCookie');
useCookie();

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

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

js 复制代码
/** 统一处理 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遇到的问题

相关推荐
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架