Manifest V3替换Ajax为Fetch后OAuth异常及会话超时卡住求助

问题根源 #

会话超时后后端返回重定向到登录页的响应，但Fetch默认不会自动处理跨域重定向（哪怕加了credentials: "include"），而且Chrome V3的后台服务Worker是无界面环境，没法处理浏览器的登录跳转逻辑，直接导致请求卡死。

解决办法 #

1. 手动拦截重定向，触发前端登录 #

给Fetch请求加上redirect: "manual"，阻止自动跳转，然后手动判断响应状态：

fetch('你的OAuth接口地址', {
  method: 'GET',
  credentials: 'include',
  redirect: 'manual' // 关键：不让Fetch自动跟重定向
})
.then(res => {
  // 重定向响应会返回opaqueredirect类型
  if (res.type === 'opaqueredirect') {
    // 会话超时，直接打开登录页让用户操作
    chrome.tabs.create({ url: '你们的登录页面地址' });
    // 也可以给popup发消息提示用户登录
    chrome.runtime.sendMessage({ type: 'SESSION_EXPIRED' });
  } else if (res.ok) {
    // 正常获取用户信息
    return res.json().then(userInfo => {
      // 处理用户信息逻辑
    });
  }
})
.catch(err => console.error('请求失败:', err));

2. 补全扩展权限配置 #

在manifest.json里必须明确配置主机权限和Cookie权限，否则Cookie传不出去：

{
  "permissions": ["cookies"],
  "host_permissions": ["https://你的公司域名/*"]
}

V3里host_permissions是单独的配置项，不能漏，否则跨域请求的Cookie会被拦截。

3. 别让后台Worker处理登录交互 #

后台Worker没界面，搞不定登录页面的交互。一旦检测到会话超时，直接把登录操作扔给用户看得见的页面：

• 开新标签页加载登录页，用户完成登录后
• 登录页可以通过chrome.runtime.sendMessage通知扩展，让扩展重新拉取用户信息

4. 提前检测会话状态（可选优化） #

发起OAuth请求前先做个轻量检测，避免走到重定向那一步：

// 用HEAD请求测会话是否有效，省流量
fetch('你的会话检测接口', {
  credentials: 'include',
  method: 'HEAD'
})
.then(res => {
  if (res.ok) {
    // 会话有效，正常拉OAuth信息
    return fetch('你的OAuth接口地址', { credentials: 'include' });
  } else {
    // 直接跳登录
    chrome.tabs.create({ url: '你们的登录页面地址' });
  }
})
.catch(err => console.error('会话检测失败:', err));

重要提醒 #

• credentials: "include"只在同源或已配置host_permissions的跨域请求里生效，域名一定要配对
• 后台Worker里别碰DOM、别弹框，所有交互都交给popup或者新标签页
• 登录完成后要主动通知扩展，不然扩展不知道用户已经登好了

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