我正在尝试通过浏览器创建基本身份验证,但我真的无法到达那里。
如果此脚本不在此处,则浏览器身份验证将接管,但是我想告诉浏览器用户即将进行身份验证。
地址应类似于:
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!');
}
});
#1楼
或者,只需使用1.5中引入的headers属性:
headers: {"Authorization": "Basic xxxx"}
参考: jQuery Ajax API
#2楼
一年如何变化。 除了代替xhr.setRequestHeader
的header属性xhr.setRequestHeader
,当前的jQuery(1.7.2+)还包括带有$.ajax
调用的用户名和密码属性。
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
username: username,
password: password,
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
从评论和其他答案中进行编辑:要明确-为了抢先发送身份验证而没有401 Unauthorized
响应,请使用'headers'
代替setRequestHeader
(-1.7之前的版本):
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
headers: {
"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
},
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
#3楼
使用jQuery ajaxSetup函数,该函数可以为所有ajax请求设置默认值。
$.ajaxSetup({
headers: {
'Authorization': "Basic XXXXX"
}
});
#4楼
上面的示例有些混乱,这可能是最好的方法:
$.ajaxSetup({
headers: {
'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
}
});
我从Rico和Yossi的答案中得出了上述结论。
#5楼
就像其他人建议的那样,您可以直接在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
说明:
对于某些跨域请求,浏览器将发送一个预检OPTIONS请求,该请求缺少您的身份验证标头。 将身份验证指令包装在LimitExcept标记内,以正确响应预检。
然后发送一些标头,以告知浏览器允许其进行身份验证,并发送Access-Control-Allow-Origin授予跨站点请求的权限。
在某些情况下, *通配符不能用作Access-Control-Allow-Origin的值:您需要返回被叫方的确切域。 使用SetEnvIf捕获此值。
#6楼
根据SharkAlley的回答,它也可以与nginx一起使用。
我正在寻找一种解决方案,以通过jQuery从位于nginx之后且受基本身份验证限制的服务器获取数据。 这对我有用:
server {
server_name example.com;
location / {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization";
# Not necessary
# add_header Access-Control-Allow-Credentials "true";
# add_header Content-Length 0;
# add_header Content-Type text/plain;
return 200;
}
auth_basic "Restricted";
auth_basic_user_file /var/.htpasswd;
proxy_pass http://127.0.0.1:8100;
}
}
JavaScript代码是:
var auth = btoa('username:password');
$.ajax({
type: 'GET',
url: 'http://example.com',
headers: {
"Authorization": "Basic " + auth
},
success : function(data) {
},
});
我觉得有用的文章:
- 本主题的答案
- http://enable-cors.org/server_nginx.html
- http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/
#7楼
可以通过以下三种方法实现此目的
方法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
},
});
#8楼
使用jQuery的beforeSend
回调添加带有身份验证信息的HTTP标头:
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},
#9楼
JSONP不适用于基本身份验证,因此jQuery beforeSend回调不适用于JSONP / Script。
我设法通过在请求中添加用户和密码(例如user:pw@domain.tld)来解决此限制。 这几乎适用于除Internet Explorer之外的任何浏览器 ,在Internet Explorer中 ,不支持通过URL进行身份验证(该调用将不会执行)。
请参阅http://support.microsoft.com/kb/834489 。
#10楼
使用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!');
}
});