Wikidata query CORS issue when making requests with frontend code running from localhost server

Question

I am trying to get the results from wikidata API using a POST XMLHttpRequest to get the results of the query. But only few of the requests pass and some return CORS issue error which is pretty confusing.

My request looks like this, I have set the origin parameter in the url itself as I understood from wikidata documentation. I have also tried setting the origin in the headers which also didn't work.

setTimeout(function () {
          var xhr = new XMLHttpRequest();
         
          xhr.open(
            "POST",
            "https://query.wikidata.org/sparql?origin=*&format=json&query=" +
              encodeURIComponent(
                queryService(settingsService()).getPropObject(
                  vm.selected.uri,
                  prop
                )
              ),
            true
          );
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
              let data = JSON.parse(xhr.response);
              setObjectInnerHtml(label, data, prop);
            }
            running -= 1;
          };
          xhr.send();
        }, 300);

But it returns an error at the xhr.send() as shown below:

Access to XMLHttpRequest at 'https://query.wikidata.org/sparql?origin=*&format=json&query=PREFIX%20rdf%3A%20%3Chttp%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%3E%0APREFIX%20rdfs%3A%20%3Chttp%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%3E%0ASELECT%20DISTINCT%20%3Furi%20%3FuriLabel%20WHERE%20%7B%0A%20%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fentity%2FQ183%3E%20%3Chttp%3A%2F%2Fwww.wikidata.org%2Fprop%2Fdirect%2FP1889%3E%20%3Furi%20.%0A%20%20OPTIONAL%20%7B%20%3Furi%20rdfs%3Alabel%20%3FuriLabel%20.%20FILTER%20(lang(%3FuriLabel)%20%3D%20%22en%22)%7D%0A%7D' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What could be going wrong here?

Update This is the series of requests from the same method, of which it can be seen that some requests pass through and some don't. The error that throws up is the CORS issue.

Answer 1

Okay, I have actually seen this happen to me (not with wikipedia) but with other API servers including some of my own.

After much head banging and trying to exclude other factors (I tried running the code on localhost and on multiple computers), this is what I found out.

The issue was with my ISP. my local ISP had an unreliable DNS server, and the connection would stop and start working, sometimes repeatedly every few seconds. Sometimes, within a second, there were any number of fast connections and disconnections. Every time this happened, the console would keep throwing a CORS error, even though it has nothing to do with CORS itself.

Also, when I deployed this app from localhost to the cloud, I never had any issues. Obviously, the cloud server has zero internet connectivity issues.

In summary, if you are intermittently getting a CORS error (as you have described), I would first start by ensuring that your internet connectivity is reliable.

And, deploy the code to an online cloud server and see if the issue replicates.

Please note : I am assuming that the calls you have mentioned in the screenshot are identical in every possible way. In my case, the issues were happening on identical calls with identical payload data.