Chrome扩展background.js中fetch不携带Cookie、无法获取响应数据怎么办

• 直接发起fetch请求报跨域错误：Chrome扩展默认未配置目标域名访问权限时，请求会受同源策略拦截。
• 配置mode: "no-cors"后状态码显示200但拿不到数据、请求不带Cookie：no-cors模式返回的是不透明（opaque）响应，设计上就禁止JS读取响应内容、响应头信息，且默认不会携带目标域名下的用户Cookie，完全无法用于获取接口有效数据。

1. 配置扩展manifest权限 #

首先在扩展的manifest.json中添加目标域名的访问权限，以当前主流的Manifest V3为例：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": [
    "https://api.bilibili.com/*"
  ]
}

如果使用旧版Manifest V2，将目标域名配置到permissions字段即可：

{
  "permissions": [
    "https://api.bilibili.com/*"
  ]
}

配置完成后必须重新加载扩展，权限规则才会生效。

2. 调整fetch请求代码 #

移除错误的no-cors模式配置，添加Cookie携带参数，示例代码如下：

fetch("https://api.bilibili.com/x/space/acc/info?mid=402655790&jsonp=jsonp", {
  credentials: "include"
})
.then(response => {
  if (!response.ok) throw new Error(`请求异常，状态码：${response.status}`)
  return response.json()
})
.then(data => {
  console.log("接口返回数据：", data)
})
.catch(err => {
  console.error("请求失败：", err)
})

说明：配置对应host权限后，扩展background上下文发起的请求不受普通页面跨域规则限制，使用默认cors模式即可正常完成请求，credentials: "include"参数会让请求自动携带用户在B站域名下的登录Cookie，拿到需要鉴权的接口数据。

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