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 Failed to load https://en.wikipedia.org/w/api.php?action=query&prop=links&format=js... : 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", " https://en.wikipedia.org/w/api.php?action=query&prop=links&format=js... ", //" https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch... ", //" https://en.wikipedia.org/w/api.php?action=query&list=search&prop=inf... ", 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)); } };
On Thu, Dec 7, 2017 at 11:17 AM, Nikola I. nikiro60@gmail.com 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.
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) <bjorsch@wikimedia.org
wrote:
On Thu, Dec 7, 2017 at 11:17 AM, Nikola I. nikiro60@gmail.com 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 Mediawiki-api@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-api
mediawiki-api@lists.wikimedia.org