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)

https://codepen.io/aus-fl/pen/WXWabX

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; support@aus-fl.com)'
  );
  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));
    }
  };