(using // https://codepen.io/andreibuiza/pen/mEbmKR?editors=1010 and opera for the test).
1.- In the opera (browser) console this was the error:
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&format=json&datatype=jsonp&prop=extracts&exsentences=3&exintro=1&explaintext=1&titles=albert. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&format=json&datatype=jsonp&prop=extracts&exsentences=3&exintro=1&explaintext=1&titles=albert. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.
2.- Ok, now to the mozilla developer network ( // https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS):
A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which the first resource itself serves. For example, an HTML page served from http://domain-a.com makes an src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.
For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.
… But this new standard means servers have to handle new request and response headers…
Examples of access control scenarios
…
For example, suppose web content on domain http://foo.example wishes to invoke content on domain http://bar.other. Code of this sort might be used within JavaScript deployed on foo.example:
…
Let us look at what the browser will send the server in this case, and let’s see how the server responds:
GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
Origin: http://foo.example
Note that the main HTTP request header of note here is the Origin: header … above, which shows that the invocation is coming from content on the the domain http://foo.example.
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml
[XML Data]
show the HTTP response from the server on domain http://bar.other. In response, the server sends back an Access-Control-Allow-Origin: header, shown above … The use of the Origin: header and of Access-Control-Allow-Origin: show the access control protocol in its simplest use. In this case, the server responds with a Access-Control-Allow-Origin: * which means that the resource can be accessed by any domain in a cross-site manner.
3.- Let’s take a look to the headers (of the “albert” search):
Request Headers (10)
:authority:en.wikipedia.org
:method:GET
:path:/w/api.php?action=query&format=json&datatype=jsonp&prop=extracts&exsentences=3&exintro=1&explaintext=1&titles=albert
:scheme:https
accept:/
accept-encoding:gzip, deflate, lzma, sdch
accept-language:es-ES,es;q=0.8
origin:https://s.codepen.io
referer:https://s.codepen.io/andreibuiza/debug/mEbmKR?editors=1010
user-agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36 OPR/37.0.2178.43
Response Headers(24)
accept-ranges:bytes
age:0
backend-timing:D=36806 t=1464437268473541
cache-control:private, must-revalidate, max-age=0
content-encoding:gzip
content-length:179
content-type:application/json; charset=utf-8
date:Sat, 28 May 2016 12:07:48 GMT
p3p:CP="This is not a P3P policy! See https://en.wikipedia.org/wiki/Special:CentralAutoLogin/P3P for more info."
server:mw1225.eqiad.wmnet
set-cookie:WMF-Last-Access=28-May-2016;Path=/;HttpOnly;secure;Expires=Wed, 29 Jun 2016 12:00:00 GMT
set-cookie:CP=H2; Path=/; secure
set-cookie:GeoIP=[country]:[city]; Path=/; secure; Domain=.wikipedia.org
status:200
strict-transport-security:max-age=31536000; includeSubDomains; preload
vary:Accept-Encoding,Treat-as-Untrusted,X-Forwarded-Proto,Cookie,Authorization
via:1.1 varnish, 1.1 varnish
x-analytics:https=1;nocookies=1
x-cache:cp1053 miss, cp1067 miss
x-client-ip:
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-powered-by:HHVM/3.12.1
x-varnish:4041760055, 1651964881
4.- ¿what is the error?:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.
5.- is true, there is no Response header ‘Access-Control-Allow-Origin:*’ or ‘Access-Control-Allow-Origin:https://s.codepen.io’
6.- but ¿ why adding “dataType: ‘jsonp’,” work?
From // http://www.json-p.org :
" Cross-domain Ajax – brief introduction
The same-origin policy in browsers dictates that certain types of data transfer in the browser layer (via JavaScript) must be restricted to only occur if the target resource’s domain is identical to the page making the request. This policy is in place in all modern browsers to help protect users from unwanted or unsafe malicious JavaScript behaviors.
… cross-domain Ajax done properly seeks to make such communication using techniques which, for various reasons, are not subject to the same-origin policy.
… One such mechanism which can request content cross-domain is the script tag. In December 2005, Bob Ippolito formally proposed JSONP (later dubbed JSON-P, or JSON-with-padding) as a way to leverage this property of script tags to be able to request data in the JSON format across domains. JSON-P works by making a script element (either in HTML markup or inserted into the DOM via JavaScript), which requests to a remote data service location. The response (the loaded “JavaScript” content) is the name of a function pre-defined on the requesting web page, with the parameter being passed to it being the JSON data being requested. When the script executes, the function is called and passed the JSON data, allowing the requesting page to receive and process the data."