如何在来自 javascript 的 REST API 调用中进行 http 身份验证

2022-01-15 00:00:00 http rest xmlhttprequest javascript

我需要从 Java 脚本调用 OpenMRS REST API 以从 OpenMRS 获取数据.下面是我的java脚本代码:

I need to call OpenMRS REST API from Java script to get data from OpenMRS. Below is my java script code:

    function myfunction(){

    var xhr = new XMLHttpRequest();

    xhr.open("GET", "http://localhost:8081/openmrs-standalone/ws/rest/v1/person?q=John", false);
    xhr.setRequestHeader("Authorization: Basic YWRtaW46QWRtaW4xMjM");

    xhr.send("");
    alert(xhr.status);

    }

YWRtaW46QWRtaW4xMjM 是我的 base64 编码的用户名:密码，如 这里.如果我没有将授权行放入代码中并使用 Firebug 检查 Web 应用程序，它会返回预期的 401 未授权状态.但是，如果我授权，则不会返回任何内容，并且在萤火虫中我也看不到任何响应.如果我直接在浏览器上检查 URL，页面会询问用户名和密码，并在提供正确的凭据后，它会正常返回数据.因此，我遇到了一些从应用程序的 java 脚本提供 http 身份验证的问题.我还考虑了这里解释的方法，但没有运气.谁能帮我从 javascript 授权 http 请求?

Where YWRtaW46QWRtaW4xMjM is my base64 coded username:password as explained here. If I do not put the authorization line in the code and check the web app using Firebug, it returns 401 unauthorized status that is expected. But if I put the authorization, nothing is returned and in firebug I do not see any response as well. If I check the URL directly on browser, the page asks for username and password and after giving correct credential, it returns the data normaly. So I am getting some problem of providing the http authentication right from the java script of the app. I have also considered the methods explained here but no luck. Can anyone please help me to authorize the http request right from the javascript?

推荐答案

这是另一个类似但不同的示例，说明如何为授权目的设置标头，但使用 JQuery 和 AJAX.

Here is another similar but different example of how to set the header for authorization purposes, but instead using JQuery and AJAX.

var token = "xyz"
var url = "http://localhost:8081/openmrs-standalone/ws/rest/v1/person?q=John"
$.ajax({
    url: url,
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Bearer " + token)
    },

})
.done(function (data) {
    $.each(data, function (key, value) {
        // Do Something
    })
})
.fail(function (jqXHR, textStatus) {
    alert("Error: " + textStatus);
})

下面也是一个示例，说明如何使用 xhr 而不是 AJAX 获取访问令牌.

Below is also an example of how you might get an access token using xhr instead of AJAX.

var data = "grant_type=password&username=myusername@website.com&password=MyPassword";

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
       console.log(this.responseText);
    }
});

xhr.open("POST", "https://somewebsite.net/token");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("client_id", "4444-4444-44de-4444");

xhr.send(data);

注意跨站点域请求(如果您请求的令牌不在 localhost 或您当前工作的域中)，因为您需要 CORS.如果您确实遇到了跨域问题，请参阅本教程以获取帮助，并且确保您也启用了来自 API 的 CORS 请求.

Beware of cross-site domain requests(if you're requesting a token that's not on localhost or within the domain that you are currently working in), as you'll need CORS for that. If you do run into a cross-domain issue, see this tutorial for help, and be sure you have enabled CORS requests from the API as well.

相关文章