Chrome仪表盘开发调用CoinGecko API出现Access-Control-Allow-Origin缺失报错

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.coingecko.com/api/v3/coins/dogecoin. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

该报错是因为CoinGecko免费公开V3 API未配置允许浏览器跨域访问的响应头，所有前端页面直接发起的请求都会被浏览器同源策略拦截，和你的代码逻辑无关。

针对你开发Chrome端仪表盘的场景，优先选择以下方案：

方案1：通过Chrome扩展后台Service Worker转发请求（最推荐） #

Chrome扩展的后台服务Worker发起的请求不受同源策略限制，是扩展调用外部API的标准实现方式：

• 第一步：修改扩展的manifest.json配置，添加接口访问权限和后台服务声明

{
  "manifest_version": 3,
  "name": "加密货币仪表盘",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": [
    "https://api.coingecko.com/*"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

• 第二步：新增background.js文件，监听前台请求并转发调用API

// 监听来自前台页面的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'fetchCoinGecko') {
    fetch(`https://api.coingecko.com/api/v3/coins/${request.coinId}`)
      .then(res => res.json())
      .then(data => sendResponse({success: true, data}))
      .catch(err => sendResponse({success: false, error: err.message}))
    // 必须返回true表示异步发送响应
    return true;
  }
});

• 第三步：替换你原来的前台fetch代码，改为向后台发消息获取数据

chrome.runtime.sendMessage(
  {type: 'fetchCoinGecko', coinId: 'dogecoin'},
  (response) => {
    if (response.success) {
      console.log(response.data);
      // 后续处理数据渲染仪表盘逻辑
    } else {
      console.error('请求失败：', response.error);
    }
  }
);

方案2：本地开发阶段使用自建代理服务 #

如果只是本地开发调试，你可以用Node.js快速搭建一个本地代理服务，由代理服务转发请求到CoinGecko API，本地代理和前端页面同源就不会有跨域问题。

方案3：升级CoinGecko付费API #

CoinGecko的付费API计划支持跨域请求头配置，升级后你原有前端fetch代码不需要做任何修改即可直接调用。

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