javascript - 访问 WebGL (two.js) 应用程序的 Soundcloud 波形/图稿 - CORS 问题

Question

我正在开发一个 WebGL 应用程序，它使用来自 soundcloud API 的数据。

我正在尝试使用 ThreeJS 将轨道图稿和波形 PNG 加载到纹理中以放入 Sprite 上。

但是我在 chrome 中遇到错误:

Image from origin [soundcloudapi] has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

所以我一直在阅读 CORS，从 Soundcloud 文档看来，CORS 以某种方式支持 JSON 数据 ( Soundcloud CORS )，但我不确定这是否或如何扩展到请求 png与轨道相关联。

我还阅读了一些有关 Three.js 和 CORS 的内容，因此我添加了以下行:

THREE.ImageUtils.crossOrigin = '';

我把它放在任何地方调用“loadTexture()”之前，但我仍然收到相同的错误。

我认为一种解决方法是在 javascript 中请求 PNG，然后向 php 文件发出 AJAX 请求，同时抓取图像并将其临时存储在我的服务器上，但如果很多人最终都这样做，那么这并不是很有效使用我的应用程序(从 Soundcloud 的 Angular 来看可能不合法或不合法)。所以我想尽可能避免这种情况。

有人尝试过这个吗？有人有什么想法吗？

感谢您的宝贵时间。

Answer 1

几个月前我遇到了同样的问题，我正在使用 http://www.waveformjs.org/来获取波形数据。它是由 Soundcloud 的某人制作的。如果你有某种后端，你可以检查存储库(虽然它是在 ruby​​ 中)，否则你可以很容易地请求数据(当它没有关闭时，就像现在一样):

$.ajax(
    url: 'http://www.waveformjs.org/w'
  , dataType: 'jsonp'
  , data: url: waveform_url
)

根据数据(从 0 到 1 的数字数组)，您可以重建波形，这就是我使用 D3 所做的，you can check how in this project这不是一个理想的答案，但至少它对我有用(同样，当它没有关闭时:/)。