维基百科 API + 跨域请求

问题描述

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

I'm trying to access Wikipedia using JavaScript and CORS.

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

As far as I know, Wikipedia should support CORS: http://www.mediawiki.org/wiki/API:Cross-site_requests

我尝试了以下脚本:创建一个 XMLHttpRequest+credential/XDomainRequest，添加一些 HTTP 标头(Access-Control-Allow-Credentials"等)并发送查询.

I tried the following script: create a XMLHttpRequest+credential/XDomainRequest, add some HTTP headers ("Access-Control-Allow-Credentials", etc.) and send the query.

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').我该如何解决?

But my script fails ('xhr.onerror' is called). How can I fix it?

推荐答案

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

CORS headers are sent to allow a requesting script to access the contents.

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

Wikipedia is sending the CORS, not you.

根据评论:

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

Wikipedia is an exception to general rule, by requiring you to append an origin parameter to the URL you are requesting.

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

I think the reason behind this is related to caching. I don't know what kind of mechanism they are using, but it probably makes it easier and better for them to store a cache object and build variations that way.

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

More on CORS from MediaWiki API documentation:

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

The MediaWiki API also requires that the origin be supplied as a request parameter, appropriately named "origin", which is matched against the Origin header required by the CORS protocol. Note that this header must be included in any pre-flight request, and so should be included in the query string portion of the request URI even for POST requests.

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

If the CORS origin check passes, MediaWiki will include the Access-Control-Allow-Credentials: true header in the response, so authentication cookies may be sent.

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

This means you have to send an Origin header to tell Wikipedia where you are coming from. Wikipedia is managing the access, not you.

发送这个源头:

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

Access-Control-Allow-* 标头是 response 标头，而不是 request 标头.

Access-Control-Allow-* headers are response headers, not request headers.

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

Wikipedia additionally requires content type json:

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

这篇关于维基百科 API + 跨域请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！