Question about 'Api-User-Agent'

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Question about 'Api-User-Agent'

Nikola I.
About: xhr.setRequestHeader( 'Api-User-Agent', 'Example/1.0' );

Hi,

I'm working on the "Build a Wikipedia Viewer" assignment at freeCodeCamp using CodePen.

I wanted to access the API via XMLHttpRequest(), but got:

index.html:1
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://s.codepen.io' is therefore not allowed access.

What would be the correct way to get connected to the API?

Thanks in advance,
Nikola Irobaliev
(freeCodeCamp student)


My experimental code:

function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  
  xhttp.open(
    "GET",
    true
  );
  xhttp.setRequestHeader(
    'Api-User-Agent',
    'Build a Wikipedia Viewer at freeCodeCamp (https://codepen.io/aus-fl/pen/WXWabX; [hidden email])'
  );
  xhttp.send();
  
   xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      
      var myObj = JSON.parse(this.responseText);
     
      document.getElementById("wikidata").innerHTML = this.responseText;  //string
      console.log(JSON.parse(myObj.links[0].title));
    }
  };



_______________________________________________
Mediawiki-api mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-api
Reply | Threaded
Open this post in threaded view
|

Re: Question about 'Api-User-Agent'

Brad Jorsch (Anomie)
On Thu, Dec 7, 2017 at 11:17 AM, Nikola I. <[hidden email]> wrote:
About: xhr.setRequestHeader( 'Api-User-Agent', 'Example/1.0' );

Your problem here has nothing to do with this header. Also, you'd want to specify something more identifying than "Example/1.0".
 
Failed to load https://en.wikipedia.org/w/api.php?action=query&prop=links&format=json&titles=Bulgaria&callback=JSON_CALLBACK:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://s.codepen.io' is therefore not allowed access.

The API only responds with CORS headers if the URL contains an "origin" parameter. For accessing from an external site like codepen.io, you'd want to specify "origin=*".

And you would not want to use the "callback" parameter in that situation, "callback" is intended for accessing a remote resource by adding a <script> tag to the header, as you might do in an old browser where XMLHttpRequest is not available.

When doing a POST, note the "origin" parameter must be in the URL's query string, not the POST body.

While it doesn't have an example for raw XMLHttpRequest, see https://www.mediawiki.org/wiki/API:Cross-site_requests and https://www.mediawiki.org/wiki/Manual:CORS for details.


--
Brad Jorsch (Anomie)
Senior Software Engineer
Wikimedia Foundation

_______________________________________________
Mediawiki-api mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-api
Reply | Threaded
Open this post in threaded view
|

Re: Question about 'Api-User-Agent'

Nikola I.
I think origin=* will do the trick, thank a lot!

Twitter: @kolio_us

On Thu, Dec 7, 2017 at 11:41 AM, Brad Jorsch (Anomie) <[hidden email]> wrote:
On Thu, Dec 7, 2017 at 11:17 AM, Nikola I. <[hidden email]> wrote:
About: xhr.setRequestHeader( 'Api-User-Agent', 'Example/1.0' );

Your problem here has nothing to do with this header. Also, you'd want to specify something more identifying than "Example/1.0".
 
Failed to load https://en.wikipedia.org/w/api.php?action=query&prop=links&format=json&titles=Bulgaria&callback=JSON_CALLBACK:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://s.codepen.io' is therefore not allowed access.

The API only responds with CORS headers if the URL contains an "origin" parameter. For accessing from an external site like codepen.io, you'd want to specify "origin=*".

And you would not want to use the "callback" parameter in that situation, "callback" is intended for accessing a remote resource by adding a <script> tag to the header, as you might do in an old browser where XMLHttpRequest is not available.

When doing a POST, note the "origin" parameter must be in the URL's query string, not the POST body.

While it doesn't have an example for raw XMLHttpRequest, see https://www.mediawiki.org/wiki/API:Cross-site_requests and https://www.mediawiki.org/wiki/Manual:CORS for details.


--
Brad Jorsch (Anomie)
Senior Software Engineer
Wikimedia Foundation

_______________________________________________
Mediawiki-api mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-api



_______________________________________________
Mediawiki-api mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-api