XMLHTTPRequest 错误:不推荐使用主线程上的同步 XMLHttpRequest ...(SoundCloud API) [英] XMLHTTPRequest Error: Synchronous XMLHttpRequest on the main thread is deprecated ... (SoundCloud API)

问题描述

我正在使用 XMLHttpRequest 访问 SoundClouds 热门曲目(https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music=1dff55bf515582dc759594dac5ba46e9&q=).我什至无法解析和所有有趣的东西，因为我的控制台记录了这个错误:

I'm using an XMLHttpRequest to access SoundClouds Top Trending Tracks (https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q=). I can't even get to parsing and all the fun stuff with it, because my console logs this error:

Synchronous XMLHttpRequest on the main thread is deprecated because of 
its detrimental effects to the end user's experience. For more help 
http://xhr.spec.whatwg.org/

我花了一些时间寻找答案 - 据我所知 - 问题是请求中的一些 javascript.所以我查看了 SoundCloud API 并在每个轨道的属性中发现了这一点:

I spend some time looking for an answer and - as far as I understand - the problem is some javascript within an request. So I looked into the SoundCloud API and found this little bit in every track's properties:

... "waveform_url":"https://wis.sndcdn.com/2AVcYzUmENai_m.json" ...

因此，我为类似问题找到的所有解决方案都不起作用，因为我无法更改其 API 的工作方式.也许我做错了什么，你们可以帮忙.

So all solutions I've found to similar problems wouldn't work, as I can't change how their API works. Maybe I'm doing something completely wrong and you guys can help.

这是导致问题的完整功能(我认为):

Here is the complete function which causes the problem (I think):

function initialSearch() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q=", false);
    xhr.addEventListener("load", function() {
        initialArray = JSON.parse(xhr.response);
        }, false);
} 

如果它有任何改变，我会在DOMContentLoaded"上调用它.

I call it on "DOMContentLoaded" if it changes anything.

也许你能帮我.谢谢.

推荐答案

您使用的 XMLHttpRequest 错误.做异步请求而不是同步.这是一个固定版本:

You are using XMLHttpRequest wrong. Do asynchronous request instead of synchronous. Here is a fixed version:

function initialSearch() {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", function() {
        initialArray = JSON.parse(xhr.response);
    }, false);
    xhr.open('GET', "https://api-v2.soundcloud.com/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q=");
    xhr.send();
}

但即便如此，您仍会收到请求的资源上不存在Access-Control-Allow-Origin"标头错误.这是 CORS 浏览器策略错误.您只能向同一来源的资源发出请求.

But even then, you will get No 'Access-Control-Allow-Origin' header is present on the requested resource error. Which is CORS browser policy error. You can only make requests to the same origin resources.

因此，如果您可以修改服务器代码，请从您的服务器执行该请求并更改您的客户端 AJAX 请求以从您的服务器请求数据.

So if you can modify your server code, do that request from your server and change your client AJAX request to ask data from your server.

这篇关于XMLHTTPRequest 错误:不推荐使用主线程上的同步 XMLHttpRequest ...(SoundCloud API)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！