保山市住房和城乡建设局网站,wordpress调用文章tag标签,男生做网站运营的前景,网页前端开发框架产生问题的原因
谷歌浏览器升级之后#xff0c;出于安全考虑#xff0c;cookie的SameSite属性默认值由None变为Lax#xff0c;对于跨域的请求#xff0c;禁止携带cookie。electron内核是chromium内核,所以也会有这个限制。 Cookie的SameSite属性用来限制第三方 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; SameSiteNone;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] ;SameSiteNone;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-cookieexport 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遇到的问题
