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

news/2024/12/14 11:57:57/

产生问题的原因

谷歌浏览器升级之后，出于安全考虑，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)
}