使用GitHub Pages与CORS代理仍遇JavaScript Fetch跨域错误

核心问题：你用错了GitHub文件URL #

你当前使用的https://github.com/benvessely/virtual-piano/blob/main/sounds/c4-virtual-piano.mp3是GitHub的代码展示页面（Blob页面），不是音频文件的直接下载链接。fetch这个URL会返回HTML页面而非音频数据，同时GitHub的Blob页面不支持跨域请求，这才是错误的根源。

解决方案1：使用GitHub原始文件URL #

将Blob链接替换为Raw文件链接，格式是把blob换成raw，或直接使用raw.githubusercontent.com域名：

// 正确的Raw文件URL
const c4AudioURL = "https://raw.githubusercontent.com/benvessely/virtual-piano/main/sounds/c4-virtual-piano.mp3";
const c4AudioFetch = fetch(c4AudioURL);

GitHub的Raw文件服务支持跨域请求，替换后即可正常获取音频数据。

解决方案2：利用GitHub Pages同源引用 #

既然你已经部署到GitHub Pages，直接用同源路径引用音频文件即可彻底避免CORS问题：

• 如果你的GitHub Pages地址是https://benvessely.github.io/virtual-piano/，音频的相对路径可写为：

const c4AudioURL = "/sounds/c4-virtual-piano.mp3";
const c4AudioFetch = fetch(c4AudioURL);

请求与页面同源，完全不会触发CORS限制，这是最稳定的方案。

关于CORS代理的补充说明 #

你之前尝试的CORS代理无效，主要是因为代理了错误的Blob页面URL。若一定要用代理（不推荐，稳定性差），需先替换为正确的Raw URL再使用代理，比如：

const c4AudioURL = "https://corsproxy.io/?https://raw.githubusercontent.com/benvessely/virtual-piano/main/sounds/c4-virtual-piano.mp3";

优先推荐前两种方案，尤其是方案2，无需依赖第三方服务。

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