如何从GitHub Release获取资源？解决CORS跨域问题

问题背景 #

我有一个存储气候数据的公开GitHub仓库，每天通过GitHub Action自动生成包含PNG、JSON资源的新版本发布。现在想开发独立Web应用直接调用这些资源做可视化，但遇到CORS跨域问题：浏览器能直接下载文件，但前端脚本因响应缺少CORS头无法通过fetch请求资源。

试过的无效方案：

• 知道可以转存到S3这类能控制响应头的平台，但不想增加额外操作
• 通过GitHub API获取资源URL再请求，虽然文档标注支持CORS，但实际仍触发跨域错误
• 尝试免费CORS代理，无效果

测试代码如下：

async function getGithubAssets() {
  const latestReleaseUrl = 'https://api.github.com/repos/garyo/sea-surface-temp-viz/releases/latest'
  const result = await fetch(latestReleaseUrl)
  const releaseData = await result.json()
  const assets = releaseData.assets // array of assets
  let sstTextureUrl = assets.find((elt: any) => elt.name == 'sst-temp-equirect.png').url
  let anomTextureUrl = assets.find((elt: any) => elt.name == 'sst-temp-anomaly-equirect.png').url
  let sstCmapUrl = assets.find((elt: any) => elt.name == 'sst-temp-equirect-cmap.json').url
  let anomCmapUrl = assets.find((elt: any) => elt.name == 'sst-temp-anomaly-equirect-cmap.json').url
  const fetch_opts = {
    headers: {
      'Accept': 'application/octet-stream'
    }
  }
  return {
    sstTexture: await (await fetch(sstTextureUrl, fetch_opts)).blob(),
    anomTexture: await (await fetch(anomTextureUrl, fetch_opts)).blob(),
    sstCmap: await (await fetch(sstCmapUrl, fetch_opts)).json(),
    anomCmap: await (await fetch(anomCmapUrl, fetch_opts)).json()
  }
}

可行解决方案 #

1. 用GitHub Pages同步资源（零额外成本） #

利用GitHub Pages的静态资源托管特性，在GitHub Action中添加步骤，将Release生成的PNG、JSON文件同步到gh-pages分支。之后资源可通过https://<username>.github.io/<repo>/<asset-path>访问，GitHub Pages默认支持CORS，前端可直接fetch。

2. 改用browser_download_url+轻量代理 #

当前代码使用的是GitHub API返回的url字段（API端点），该端点虽支持CORS，但资源响应头未配置Access-Control-Allow-Origin。改用browser_download_url字段（直接CDN链接），再通过免费的Cloudflare Workers做简单代理添加CORS头：

修改前端URL获取逻辑

// 替换原url字段为browser_download_url
let sstTextureUrl = assets.find((elt: any) => elt.name == 'sst-temp-equirect.png').browser_download_url
let anomTextureUrl = assets.find((elt: any) => elt.name == 'sst-temp-anomaly-equirect.png').browser_download_url
let sstCmapUrl = assets.find((elt: any) => elt.name == 'sst-temp-equirect-cmap.json').browser_download_url
let anomCmapUrl = assets.find((elt: any) => elt.name == 'sst-temp-anomaly-equirect-cmap.json').browser_download_url

Cloudflare Workers代理代码

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const targetUrl = url.searchParams.get('url')
  if (!targetUrl) return new Response('Missing url parameter', { status: 400 })

  const response = await fetch(targetUrl)
  const headers = new Headers(response.headers)
  headers.set('Access-Control-Allow-Origin', '*')
  headers.set('Access-Control-Allow-Methods', 'GET, HEAD')

  return new Response(response.body, {
    status: response.status,
    headers: headers
  })
}

前端通过代理请求

const proxyUrl = 'https://your-worker-name.your-username.workers.dev'
return {
  sstTexture: await (await fetch(`${proxyUrl}?url=${encodeURIComponent(sstTextureUrl)}`)).blob(),
  anomTexture: await (await fetch(`${proxyUrl}?url=${encodeURIComponent(anomTextureUrl)}`)).blob(),
  sstCmap: await (await fetch(`${proxyUrl}?url=${encodeURIComponent(sstCmapUrl)}`)).json(),
  anomCmap: await (await fetch(`${proxyUrl}?url=${encodeURIComponent(anomCmapUrl)}`)).json()
}

3. 直接使用仓库Raw资源（如果资源已提交到分支） #

若这些PNG/JSON文件同时存在于仓库的某个分支（如main），可直接用GitHub Raw URL访问：https://raw.githubusercontent.com/<username>/<repo>/<branch>/<file-path>，GitHub Raw默认支持CORS，前端可直接请求。

无效原因说明 #

• GitHub API的资源URL（url字段）即使通过API授权访问，返回的资源响应头仍未包含Access-Control-Allow-Origin，导致跨域
• 免费CORS代理普遍存在请求频率限制，或被GitHub CDN拦截，无法稳定使用

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