javascript - 缺少CORS 400接头(其他问题)

Question

这是我的第一个使用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

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

Answer 1

如果您尝试浏览Chrome中的链接，则会收到以下消息
Missing required request header. Must specify one of: origin,x-requested-with
您将需要如上所述定义自定义请求 header ，以使其起作用。请参阅api here，因为它明确说明了您应该事先做的事情。

您应该使用以下 header 创建一个请求

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
})