如何使用 javascript 将 jenkins 数据获取到 HTML 页面

Question

我刚刚按照 Jenkins 网站中给出的步骤进行操作。现在我可以使用 http://localhost:8080 登录 Jenkins

当我使用http://localhost:8080/api/json?pretty=true 时，我可以从我的本地主机服务器获得 JSON 响应。但是当我尝试将数据获取到 html 页面时，即当我使用 url http://localhost:1234/foldername/file.html 时，我无法使用 AJAX 调用获取数据。下面是我用于 AJAX 调用的代码

$.ajax({
        type: 'GET',
        url: 'http://localhost:8080/api/json?pretty=true',
        dataType: 'json',
        //whatever you need
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', make_base_auth('admin', 'admin'));
        },
        success: function (data){
            alert(data);
        }
    });

    function make_base_auth(user, password) {
        var tok = user + ':' + password;
        var hash = btoa(tok);
        return 'Basic ' + hash;
    }

我遇到了身份验证错误。

Answer 1

根据我对the documentation 的理解，Jenkins 建议使用通过 HTTP 基本身份验证提供的用户 API 密钥，而不是其密码。

现代 jQuery（1.5 或更高版本）还在 jQuery.ajax() 的选项中添加了一个 headers 字段

headers: {'Authorization': 'Basic ' + btoa('username:apitoken')}

但是，如果没有这些建议，您在此处描述的内容应该可以正常工作。

我的假设是您遇到了Same-origin policy，因为您的客户端基于浏览器文档，来自与运行 Jenkins 服务器不同的来源（不同的端口）。您需要在您的 Jenkins 服务器上添加 CORS headers 以允许您的页面的域访问 Jenkins 资源，或者将 Jekins API 和您的客户端页面从单一来源托管。

对于您的示例，您可以使用CORS Filter Plugin，并且需要添加标题至少允许如下：

Access-Control-Allow-Origins: http://localhost:1234
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: Authorization

在生产中，您可以使用单一来源，也可以更新来源列表以包括您的仪表板在生产中的任何位置，或者如果您对同源问题有信心，将 * 作为任何来源的通配符。