Chrome扩展发送GET请求遇CORS策略拦截问题求助

首先你的fetch代码有个小问题：第一个.then里没返回resp.json()，导致第二个.then拿不到数据，修正后代码如下：

let link = "https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=XXXXXXXXXX&steamids=764564564575656";
fetch(link)
    .then(resp => resp.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err));

核心解决办法 #

Chrome扩展有独立的权限体系，完全可以绕过页面的CORS限制，下面是两种靠谱方案：

1. 在manifest.json中配置主机权限 #

这是最直接的方法，根据你使用的Manifest版本配置即可：

• Manifest V3：在manifest.json里添加host_permissions字段：

{
  "manifest_version": 3,
  "host_permissions": [
    "https://api.steampowered.com/*"
  ],
  // 其他扩展配置项...
}

• Manifest V2：在permissions字段里添加对应域名：

{
  "manifest_version": 2,
  "permissions": [
    "https://api.steampowered.com/*"
  ],
  // 其他扩展配置项...
}

配置完成后，内容脚本直接发起fetch请求就不会触发CORS错误了——扩展的请求独立于页面源，不受页面CORS规则限制。

2. 用后台脚本做请求代理 #

如果不想在内容脚本中直接处理API请求，或者想避免暴露Steam API Key，可以把请求逻辑放到扩展的后台上下文（V3用Service Worker，V2用Background Page）：

• 步骤1：后台脚本处理请求
  以V3的service-worker.js为例：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getSteamPlayerSummary") {
    fetch(`https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=XXXXXXXXXX&steamids=${request.steamId}`)
      .then(resp => resp.json())
      .then(data => sendResponse(data))
      .catch(err => sendResponse({error: err.message}));
    return true; // 保持消息通道开放直到异步操作完成
  }
});

• 步骤2：内容脚本发送消息并接收数据

chrome.runtime.sendMessage(
  {action: "getSteamPlayerSummary", steamId: "764564564575656"},
  (response) => {
    if (response.error) {
      console.error(response.error);
    } else {
      console.log(response);
    }
  }
);

后台脚本的请求完全不受CORS限制，同时能更好地保护你的API Key不被页面脚本窃取。

不要使用的方案 #

错误提示里提到的mode: 'no-cors'不要尝试——开启后你无法解析API返回的JSON数据，只能得到一个无法读取的opaque响应，完全满足不了获取数据的需求。

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