维基百科 API + 跨域请求

Question

我正在尝试使用 JavaScript 和 CORS 访问维基百科。

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

我尝试了以下脚本：创建一个 XMLHttpRequest+credential/XDomainRequest，添加一些 HTTP 标头（“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 URL 中包含以下参数。

&origin=*

Working 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

截至 2016 年 8 月，维基百科通过使用普通 Ajax 请求（无需 JSONP/回调操作）支持 CORS 请求。 这可以通过在 API 调用中设置源来完成。

对于经过身份验证的请求，这必须与 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 sandbox

Answer 3

CORS 标头被发送到允许请求脚本访问内容。

维基百科发送的是 CORS，而不是 你。

根据 cmets：

维基百科是一般规则的一个例外，它要求您将 origin 参数附加到您请求的 URL。

我认为这背后的原因与缓存有关。我不知道他们使用的是哪种机制，但它可能使他们更容易更好地存储缓存对象并以这种方式构建变体。

---

MediaWiki API 文档中有关 CORS 的更多信息：

MediaWiki API 还要求将来源作为 请求参数，适当命名为“origin”，匹配 针对 CORS 协议要求的 Origin 标头。注意 此标头必须包含在任何飞行前请求中，因此应该 包含在请求 URI 的查询字符串部分中，即使对于 POST 请求。

如果 CORS 来源检查通过，MediaWiki 将包含 Access-Control-Allow-Credentials：响应中的真实标头，所以 可能会发送身份验证 cookie。

这意味着你必须发送一个Origin 标头来告诉维基百科你来自哪里。维基百科正在管理访问权限，而不是您。

发送这个源头：

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

Access-Control-Allow-* headers 是 response headers，而不是 request headers。

维基百科还需要内容类型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) { ... }
}

Answer 5

单独添加 origin=* 和 URL 对我不起作用，因此添加了 withCredentials=false。它会起作用的。

那些在添加origin=*后再次遇到问题的人：试试下面的withCredentials = false

var xhttp = new XMLHttpRequest();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&limit=5&origin=*&search=simple";
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText)
    }
};
xhttp.open("GET", url, true);
xhttp.withCredentials = false;
xhttp.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhttp.send();

感谢@muraliv