Chrome扩展调用Discord API get-user接口返回403错误问题

问题根因 #

1. Discord API官方禁止在浏览器/客户端环境下使用Bot令牌发起请求：浏览器发起请求时会自动携带Origin、Referer等标识请求来源的头部，Discord服务端检测到请求来自浏览器环境且使用Bot认证时，会直接返回403拦截请求。而Node.js属于服务端运行环境，发起请求时不会携带这类浏览器专属的源标识头部，因此可以正常拿到响应。
2. Chrome扩展权限配置缺失：如果未在扩展的manifest.json文件中声明discord.com域的请求权限，扩展的网络请求会被浏览器的扩展权限机制拦截，也可能返回403错误。

可行解决方案 #

方案1：通过扩展后台服务Worker发起请求（优先推荐） #

Chrome扩展的background service worker运行在独立的背景上下文，不属于普通网页环境，发起请求时不会携带普通浏览器页面对应的源标识头部，可绕过Discord的浏览器环境检测，操作步骤如下：

• 第一步：在manifest.json中声明Discord API的访问权限和后台服务Worker配置，示例（适配Manifest V3）：

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

• 第二步：将原本写在popup中的getUserData逻辑迁移到background.js中，popup通过扩展消息API向background传递userID、botKey等参数，background完成请求后将结果返回给popup即可。

方案2：搭建私人中转服务 #

自行开发一个简单的后端接口，Chrome扩展仅向你的后端接口传递userID参数，由后端服务携带Bot令牌向Discord API发起请求，再将结果返回给扩展。该方案还可以避免Bot令牌暴露在扩展的前端代码中，大幅降低令牌泄露的安全风险。

方案3：修改请求头模拟服务端请求（不推荐，稳定性差） #

可以尝试在fetch请求的配置中手动覆盖Origin头，伪造请求来自Discord官方域，示例如下：

const res = await fetch(`https://discord.com/api/v9/users/${userID}`, {
  headers: {
    Authorization: `Bot ${botKey}`,
    Origin: 'https://discord.com'
  },
})

该方案依赖Discord的反爬规则，可能随时失效，仅适合临时测试使用。

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