维基百科API +跨域请求

Question

我正在尝试使用javascript + CORS访问维基百科

据我所知,维基百科应该支持CORS:http://www.mediawiki.org/wiki/API :Cross-site_requests

我尝试了以下脚本:创建XMLHttpRequest + credential/XDomainRequest,添加一些Http-Headers("Access-Control-Allow-Credentials",...)并发送查询.

http://jsfiddle.net/lindenb/Vr7RS/

var WikipediaCORS=
    {
    setMessage:function(msg)
        {
        var span=document.getElementById("id1");
        span.appendChild(document.createTextNode(msg));
        },
    // Create the XHR object.
    createCORSRequest:function(url)
        {
        var xhr = new XMLHttpRequest();


        if ("withCredentials" in xhr)
            {
            xhr.open("GET", url, true);
            }
        else if (typeof XDomainRequest != "undefined")
            {
            xhr = new XDomainRequest();
            xhr.open(method, url);
            }
        else
            {
            return null;
            }
        xhr.setRequestHeader("Access-Control-Allow-Credentials", "true");
        xhr.setRequestHeader("Access-Control-Allow-Origin","*");
        return xhr;
        },
    init:function()
        {
        var _this=this;
        var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=Javascript&format=json';
        var xhr = this.createCORSRequest(url);
        if (!xhr)
            {
                this.setMessage('CORS not supported');
                return;
            }

        xhr.onload = function()
            {
                _this.setMessage(xhr.responseText);
            };
        xhr.onerror = function()
            {
                _this.setMessage('Woops, there was an error making the request.');
            };
        xhr.send();
        }
    };

但我的脚本失败了('xhr.onerror'被调用).我该如何解决？

谢谢.

Answer 1

我在使用freeCodeCamp项目时遇到了同样的问题,解决方案很简单,因为我花了几个小时搜索它,所以我笑了.在你的jquery网址中包含以下参数.

&起源=*

工作Codepen

$.getJSON(
  'https://en.wikipedia.org/w/api.php?action=query&format=json&gsrlimit=15&generator=search' +
  '&origin=*' + // <-- this is the magic ingredient!
  '&gsrsearch='q, function(data){ /* ... */ }
);

Answer 2

截至今天,维基百科通过使用正常的ajax请求(不需要JSONP /回调操作)来支持CORS请求.这可以通过在API调用中设置原点来完成.

对于经过身份验证的请求,它必须与Origin标头中的一个"origin"完全匹配(您需要在进行ajax调用时使用beforeSend属性设置此项).
对于未经身份验证的请求,您只需将其设置为星号(*),并且在使用域中的简单$ .getJSON时它可以正常工作.示例api调用:
https://en.wikipedia.org//w/api.php?action=opensearch&format=json&origin=*&search=stack&limit=10
MediaWiki API沙箱中的更多内容:MediaWiki API沙箱

Answer 3

CORS标头被发送给ALLOW请求脚本以访问内容.

维基百科正在发送CORS,而不是你.

从您链接的页面:

MediaWiki API还要求将原点作为请求参数提供,该参数适当地命名为"origin",它与CORS协议所需的Origin头匹配.请注意,此标头必须包含在任何飞行前请求中,因此即使对于POST请求,也应包含在请求URI的查询字符串部分中.

如果CORS原始检查通过,MediaWiki将在响应中包含Access-Control-Allow-Credentials:true标头,因此可以发送身份验证cookie.

这意味着你必须发送一个origin标题来告诉维基百科你来自哪里.维基百科正在管理访问,而不是你.

发送此原始标题:

xhr.setRequestHeader("Origin", "http://www.yourpage.com");

Origin标头是响应标头,而不是请求标头.

维基百科还需要内容类型json:

xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

Answer 4

你可以使用jQuery JSONP:

$.ajax( {
    url: "https://en.wikipedia.org/w/api.php",
    jsonp: "callback", 
    dataType: 'jsonp', 
    data: { 
        action: "query", 
        list: "search", 
        srsearch: "javascript", 
        format: "json" 
    },
    xhrFields: { withCredentials: true },
    success: function(response) { ... }
}