javascript - 如何使用 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 key ，而不是其密码。

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

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

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

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

对于此处的示例，您可以使用 CORS Filter Plugin并且需要至少添加如下允许的 header :

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

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