通过Fetch将GitHub仓库Zip加载至内存编辑后下载的跨域问题
解决无后端网站自定义GitHub多模块Zip下载的CORS问题
可行方案一:GitHub Actions自动同步Release Zip到GitHub Pages
这是最稳妥的无额外成本方案,解决CORS问题同时避免手动维护重复文件:
- 编写GitHub Actions工作流,在每次发布Release时自动触发:
- 拉取仓库的GitHub Pages分支
- 创建对应版本的目录,下载当前Release的完整仓库Zip包存入该目录
- 提交并推送更新到Pages分支
- 浏览器端直接从同域的Pages地址(如
https://你的用户名.github.io/仓库名/releases/版本号/full.zip)Fetch Zip包,无CORS限制 - 用
jszip库读取内存中的Zip,移除不需要的模块后重新生成Zip供用户下载
示例Actions工作流核心代码:
name: Sync Release Zips to Pages on: release: types: [published] jobs: sync-zip: runs-on: ubuntu-latest steps: - name: Checkout Pages branch uses: actions/checkout@v4 with: ref: gh-pages - name: Create release directory run: mkdir -p releases/${{ github.event.release.tag_name }} - name: Download Release Zip run: | curl -L -o releases/${{ github.event.release.tag_name }}/full.zip https://github.com/${{ github.repository }}/archive/refs/tags/${{ github.event.release.tag_name }}.zip - name: Commit and push updates run: | git config user.name "GitHub Actions" git config user.email "actions@github.com" git add releases/ git commit -m "Add zip for release ${{ github.event.release.tag_name }}" git push
(注:需提前开启仓库的GitHub Pages功能,选择gh-pages分支作为部署源)
可行方案二:优化单模块下载合并方案
如果不想同步完整Zip,可优化单文件下载逻辑降低API请求消耗:
- 先用GitHub API获取指定版本的仓库目录结构,仅请求用户选中模块的根目录列表
- 仅下载选中模块下的所有文件,而非遍历整个仓库
- 用
jszip将下载的文件按原目录结构打包成Zip - 未认证API的60次/小时限额,对于模块数量不多的场景足够应对;若仓库较大,可提示用户可选使用GitHub OAuth提升限额(非强制要求)
不推荐的应急方案
以下方法仅适合临时测试,不建议用于生产环境:
- 使用
fetch的mode: 'no-cors'参数,但仅能获取opaque类型响应,无法读取Zip内容进行修改,只能触发完整包的直接下载,不符合自定义合并需求 - 尝试通过
<iframe>传递Blob,但浏览器同源策略限制无法跨域读取iframe中的内容,无法实现Zip修改
内容的提问来源于stack exchange,提问作者Plagiatus
相关产品推荐
相关产品推荐

