产生问题的原因
谷歌浏览器升级之后,出于安全考虑,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)
}