CODEWITHSUNDEEP
javascriptxmlhttprequestcorswikidatawikidata-api
MJ2410
MJ2410

Reputation: 518

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

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.

enter image description here

Upvotes: 1

Views: 423

Answers (2)

Evan G
Evan G

Reputation: 21

If you're still encountering this issue with local development, I was able to workaround the issue by adding the User-Agent header and using a UA string from the User-Agent Mozilla docs .

In the wikiadata docs it says:

Clients who don’t comply with the User-Agent policy may be blocked completely – make sure to send a good User-Agent header.

Ex:

const res = await fetch(
        `https://query.wikidata.org/bigdata/namespace/wdq/sparql?query=${query}`,
        {
            headers: {
                Accept: 'application/sparql-results+json',
                'User-Agent':
                    'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36',
            },
        }
    )

Upvotes: 0

Jay
Jay

Reputation: 3050

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.

Upvotes: 1

Related Questions