弹窗实现Twitter身份验证时Express session cookie失效问题求助

1. 配置前端请求携带跨域凭证 #

你前后端部署在不同域名下属于跨域请求，XMLHttpRequest/fetch API 默认不会携带跨域cookie，必须手动开启配置：

• 若使用fetch发起请求，所有请求添加credentials: 'include'参数：

fetch('https://你的Heroku后端地址/api/xxx', {
  credentials: 'include',
  // 其余请求配置
})

• 若使用axios发起请求，可全局开启凭证携带：

axios.defaults.withCredentials = true

也可在单个请求中单独配置：

axios.get('/api/xxx', { withCredentials: true })

2. 修正后端CORS配置 #

跨域请求携带凭证时，后端CORS不允许使用*通配符作为允许源，必须明确指定前端域名，同时开启凭证允许：

const cors = require('cors')
app.use(cors({
  origin: 'https://你的GitHub Pages对应的域名（如https://xxx.github.io）',
  credentials: true
}))

3. 适配最新浏览器第三方Cookie策略 #

目前Chrome等主流浏览器对跨站第三方Cookie增加了Partitioned属性要求，未携带该属性的第三方Cookie会被拦截，修改你的会话Cookie配置添加该属性：

resave: false,
saveUninitialized: false,
proxy: true,
cookie: {
    sameSite: "none",
    secure: true,
    maxAge: 24 * 60 * 60 * 1000,
    partitioned: true // 新增该属性
},

4. 优化弹窗登录回调逻辑 #

避免登录完成后立即关闭弹窗导致Cookie未完成写入，可在回调页面通过postMessage通知主窗口后再延迟关闭弹窗：

• 弹窗登录完成后重定向到的回调页面添加如下JS代码：

// 仅允许向你的前端域名发送消息，避免安全问题
if (window.opener && window.opener.location.origin === 'https://你的GitHub Pages域名') {
  window.opener.postMessage('LOGIN_SUCCESS', window.opener.location.origin)
  setTimeout(() => window.close(), 150)
}

• 主窗口监听登录成功消息后再发起后续业务请求：

window.addEventListener('message', (e) => {
  if (e.origin === 'https://你的GitHub Pages域名' && e.data === 'LOGIN_SUCCESS') {
    // 在这里发起后续的用户信息查询、业务请求等操作
  }
})

内容的提问来源于stack exchange，提问作者Abdelrahman Said