XMLHTTPRequest错误:不赞成在主线程上使用同步XMLHttpRequest ...(SoundCloud API)

本文介绍了XMLHTTPRequest错误:不赞成在主线程上使用同步XMLHttpRequest ...(SoundCloud API)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用 XMLHttpRequest访问SoundClouds 热门趋势跟踪("> api-v2.soundcloud/charts?kind=trending&genre=soundcloud:genres:all-music&client_id= 1dff55bf515582dc759594dac5ba46e9& q = ).我什至无法解析所有有趣的东西，因为我的控制台记录了以下错误:

I'm using an XMLHttpRequest to access SoundClouds Top Trending Tracks (api-v2.soundcloud/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 xhr.spec.whatwg/

我花了一些时间寻找答案，并且-据我了解-问题是请求中包含一些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":"wis.sndcdn/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', "api-v2.soundcloud/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.

也许您可以帮助我.谢谢.

Maybe you can help me. Thanks.

推荐答案

您使用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', "api-v2.soundcloud/charts?kind=trending&genre=soundcloud:genres:all-music&client_id=1dff55bf515582dc759594dac5ba46e9&q="); xhr.send(); }

但是即使那样，您仍然会得到No 'Access-Control-Allow-Origin' header is present on the requested resource错误.这是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.