Problem with wikipedia api

JavaScript
1

Folks, I’ve been working on the Wikipedia viewer project, but can’t seem to get started because I am unable to receive data back from the Wikipedia API using the link they told me to use.

It is so unfortunate that I must be an IT engineer in order to get this to work, but here is the details. Yes I activated both jQuery and Bootstrap. The link to my codepen wikipedia project is:

The Javascript code is:

$.getJSON("https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&formatversion=2", function(json) {
  $(".message").html(JSON.stringify(json));
    
  });

the HTML code is:

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

and the Control-Shift-J browser console says:

An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. yjLQGQ
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-78992f1ed89d5cadb09702e6a0d5bbb0302e85c728c1f8d18fdc8aa56870104c.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown)
downloadable font: download failed (font-family: “Telefon Black” style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: https://static.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-78992f1ed89d5cadb09702e6a0d5bbb0302e85c728c1f8d18fdc8aa56870104c.woff unknown:1:24055
downloadable font: download failed (font-family: “Telefon” style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: https://static.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff unknown:1:24452
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-6435f1279663bb84d4a1d8effe0adafbf8499ff6efdd01a59be848c90d8c4c0b.woff2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown)
downloadable font: download failed (font-family: “Telefon Black” style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: https://static.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-6435f1279663bb84d4a1d8effe0adafbf8499ff6efdd01a59be848c90d8c4c0b.woff2 unknown:1:24055
POST
XHR
http://localhost:27275/command
[HTTP/1.0 500 FAILED 0ms]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&formatversion=2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). (unknown)
POST
XHR
http://localhost:27275/command
[HTTP/1.0 500 FAILED 0ms]
POST
XHR
http://localhost:27275/command
[HTTP/1.0 500 FAILED 0ms]
POST
XHR
http://localhost:27275/command
[HTTP/1.0 500 FAILED 1ms]
POST
XHR
http://localhost:27275/command
[HTTP/1.0 500 FAILED 2ms]
POST
XHR
http://localhost:27275/command

7

You don’t need to know “how to be an IT engineer”, you need to understand how the internet works. That being said, it is very confusing and the frustration you are having is the same that nearly everyone encounters.

The key is to read the documentation and find the correct string and process to access an API. Every one is different, they are often not well documented, and they can change without warning. Sorry, that’s just how it is.

A while back I wrote this pen to show a working url for the wiki project. I build this by reading the wiki api documentation. And doing a lot of google searches. And banging my head against the desks for several hours.

Go ahead, get frustrated. But know that this is frustrating for everyone.