我试图通过浏览器创建一个基本的身份验证，但我真的无法到达那里。
如果这个脚本不在这里，浏览器将接管身份验证，但我想告诉浏览器用户即将进行身份验证。
地址应该是这样的:
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!');
}
});
一年中事情发生了怎样的变化。除了头属性的位置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响应的情况下先发制人地发送身份验证，而不是setRequestHeader (pre -1.7)使用'headers':
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
headers: {
"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
},
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
根据SharkAlley的回答，它也适用于nginx。
我正在寻找一种解决方案，通过jQuery从nginx后面的服务器获取数据，并受到Base Auth的限制。这对我来说很管用:
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/
正如其他人建议的那样，你可以直接在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来捕获这个值。
使用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!');
}
});
