尽管使用 GH 页面和 CORS 代理，Javascript 获取仍会出现 CORS 错误

Question

我正在开发一个虚拟钢琴应用程序，在尝试从 github 获取音频文件时遇到很多问题。具体来说，我不断收到错误

从源

'https://github.com/benvessely/virtual-piano/blob/main/sounds/c4-virtual-piano.mp3'

获取

'http://127.0.0.1:5500'

的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

GET https://github.com/benvessely/virtual-piano/blob/main/sounds/c4-virtual-piano.mp3 net::ERR_FAILED 200 (OK)
@ piano.js:57 ready  

Uncaught (in promise) TypeError: Failed to fetch at createAudioBuffers (piano.js:57:26) at ready (piano.js:28:26) at piano.js:13:5

在我的代码中，我只是通过

调用 fetch

const c4AudioURL = "https://github.com/benvessely/virtual-piano/blob/main/sounds/c4-virtual-piano.mp3";   
const c4AudioFetch = fetch(c4AudioURL);  

我在 VSCode 上使用 Live Server，因此我尝试将我的网站部署到 GH Pages 以查看是否可以解决问题，但我仍然遇到错误。尝试了两个不同的 CORS 代理看看是否有帮助后，仍然没有任何变化。

我在这里遗漏了什么吗？我想我可能在我的代码中或者在使用 Github 的方式中遗漏了一些东西，因为我是一个非常缺乏经验的程序员。我已经被困在这个问题上有一段时间了，所以我很感激你的任何想法！

Answer 1

使用本地/服务器相对路径。例如，假设您的目录结构如下所示...

.
├── index.html
├── piano.js
└── sounds
    └── c4-virtual-piano.mp3

通过 LiveServer 提供此目录或将其部署到 Github Pages，您可以在不跨域的情况下获取资源

const res = await fetch('/sounds/c4-virtual-piano.mp3');

这样，只要您在部署到 Github 页面时发布 MP3 文件，它就可以在任何地方运行。那么你就完全不用担心 CORS 了