跨域ajax请求基本认证

Posted 2023-05-08

【中文标题】跨域ajax请求基本认证

【英文标题】：Cross-domain ajax request basic authentication

【发布时间】：2013-05-17 08:53:57

【问题描述】：

我正在发出跨域 ajax 请求以获取一些数据。 REST 服务有Basic authentication（通过IIS 设置）。

$.ajax(
            type: "GET",
            xhrFields: 
                withCredentials: true
            ,
            dataType: "jsonp",
            contentType: "application/javascript",
            data: myData,
            async: false,
            crossDomain: true,
            url: "http://xx.xx.xx.xx/MyService/MyService.svc/GetData",
            success: function (jsonData) 
                console.log(jsonData);
            ,
            error: function (request, textStatus, errorThrown) 
                console.log(request.responseText);
                console.log(textStatus);
                console.log(errorThrown);
            
        );

当我提出此请求时，它会提示我输入凭据，我必须手动输入凭据才能获得响应。我们可以通过请求本身发送这些凭据吗？

【参考方案1】：

像下面的代码一样传递用户名和密码，

$.ajax(
    type: "GET",
    xhrFields: 
        withCredentials: true
    ,
    dataType: "jsonp",
    contentType: "application/javascript",
    data: myData,
    async: false,
    crossDomain: true,
    url: "http://xx.xx.xx.xx/MyService/MyService.svc/GetData",
    success: function (jsonData) 
        console.log(jsonData);
    ,
    error: function (request, textStatus, errorThrown) 
        console.log(request.responseText);
        console.log(textStatus);
        console.log(errorThrown);
    
    username: username,
    password: password,
);

【参考方案2】：

$.ajax(  
    url: 'yoururl',
    username : username,
    password :password,
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    dataType: "text",
    xhrFields: 
    
        withCredentials: true
    ,
    beforeSend: function (xhr)  
        xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + ":" + password));             
    
);

【讨论】：

我对这个答案并不感到兴奋，原因如下：它是多余的（大约半年前回答了这个问题）而且它是多余的（jQuery 为你处理身份验证的东西，AFAICT）。如果我对后者有误，请编辑答案，我将删除此评论。

使用 beforeSend 属性对我有用，因为用户名和密码由于某种原因没有添加 Authorization 标头。以防万一它对任何人都有帮助。

【参考方案3】：

$.ajax(//No need to pass credentials 
            type: "get",
            async: false,
            url: "https://someurl/",
            xhrFields: 
                withCredentials: true
            ,            
            success: function (data) 
                //do something
            
        )