我试图通过浏览器创建一个基本的身份验证，但我真的无法到达那里。
如果这个脚本不在这里，浏览器将接管身份验证，但我想告诉浏览器用户即将进行身份验证。
地址应该是这样的:
http://username:password@server.in.local/
我有一个表格:
<form name="cookieform" id="login" method="post">
<input type="text" name="username" id="username" class="text"/>
<input type="password" name="password" id="password" class="text"/>
<input type="submit" name="sub" value="Submit" class="page"/>
</form>
还有一个脚本:
var username = $("input#username").val();
var password = $("input#password").val();
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = Base64.encode(tok);
return "Basic " + hash;
}
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
async: false,
data: '{"username": "' + username + '", "password" : "' + password + '"}',
success: function (){
alert('Thanks for your comment!');
}
});
使用beforeSend回调函数添加一个带有认证信息的HTTP头，如下所示:
var username = $("input#username").val();
var password = $("input#password").val();
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = btoa(tok);
return "Basic " + hash;
}
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
async: false,
data: '{}',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', make_base_auth(username, password));
},
success: function (){
alert('Thanks for your comment!');
}
});
有3种方法可以实现这一点，如下所示
方法1:
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
headers: {
"Authorization": "Basic " + btoa(uName+":"+passwrd);
},
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
方法2:
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', "Basic " + btoa(uName+":"+passwrd));
},
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
方法3:
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
username:uName,
password:passwrd,
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
正如其他人建议的那样，你可以直接在Ajax调用中设置用户名和密码:
$.ajax({
username: username,
password: password,
// ... other parameters.
});
或者使用headers属性，如果你不愿意存储你的凭证在纯文本:
$.ajax({
headers: {"Authorization": "Basic xxxx"},
// ... other parameters.
});
无论你用哪种方式发送，服务员都必须非常有礼貌。对于Apache，你的.htaccess文件应该是这样的:
<LimitExcept OPTIONS>
AuthUserFile /path/to/.htpasswd
AuthType Basic
AuthName "Whatever"
Require valid-user
</LimitExcept>
Header always set Access-Control-Allow-Headers Authorization
Header always set Access-Control-Allow-Credentials true
SetEnvIf Origin "^(.*?)$" origin_is=$0
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is
解释:
对于一些跨域请求，浏览器会发送一个preflight OPTIONS请求，该请求缺少您的身份验证头。将身份验证指令包装在LimitExcept标记中，以正确响应preflight。
然后发送一些报头，告诉浏览器允许它进行身份验证，并通过Access-Control-Allow-Origin为跨站点请求授予权限。
在某些情况下，*通配符不能作为Access-Control-Allow-Origin的值:您需要返回被调用方的确切域。使用SetEnvIf来捕获这个值。
