缺少 CORS 400 标头（以及其他问题）

Posted 2023-02-16

【中文标题】缺少 CORS 400 标头（以及其他问题）

【英文标题】：CORS 400 header missing (among other issues)

【发布时间】：2019-11-30 19:49:25

【问题描述】：

这是我第一个使用 javascript 的项目（基本上来自这里的分叉代码：https://www.kkhaydarov.com/audio-visualizer/）

我正在尝试构建一个可视化工具来响应我托管的音频。

问题： - 抛出 CORS 400 错误（我在源 URL 中使用 https://cors-anywhere.herokuapp.com/http://） - 音频无法识别

这是我在 codepen 上的项目的链接：https://codepen.io/beewash92/project/editor/ZGWOQr 代码也存放在我的github上：https://github.com/beewash/js-audio-visualizer

enter code here

我在 *** 和网络上搜索了其他帖子，但仍然遇到问题。感谢您的帮助！

【参考方案1】：

如果您尝试在 chrome 中浏览链接，您将收到如下消息

Missing required request header. Must specify one of: origin,x-requested-with

您需要按上述定义自定义请求标头才能使其正常工作。请参考 apihere，因为它清楚地说明了您应该事先做什么。

您应该创建一个带有如下标头的请求

fetch('https://cors-anywhere.herokuapp.com/http://soundcloud.com/gentttry/10999-1', 
    'headers': 
        'Origin': 'soundcloud.com'
    
)
.then(res=>res.blob())
.then(blob=>URL.createObjectURL(blob))
.then(audio_src=>
    // Then init your audio here and assign the url
)

【讨论】：

问题是链接没有返回音频。您需要找到实际的音频二进制链接