对jQuery和Ajax使用基本身份验证

猪猪神无伽罗2020-03-17

我正在尝试通过浏览器创建基本身份验证，但是我真的无法到达那里。

如果此脚本不在此处，则浏览器身份验证将接管，但是我想告诉浏览器用户即将进行身份验证。

地址应类似于：

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!');
    }
});

Eva神乐2020/03/17 11:54:41

JSONP不适用于基本身份验证，因此jQuery beforeSend回调不适用于JSONP / Script。

我设法通过在请求中添加用户和密码（例如user：pw@domain.tld）来解决此限制。这几乎适用于除Internet Explorer之外的任何浏览器，在Internet Explorer中，不支持通过URL进行身份验证（该调用将不会执行）。

请参阅http://support.microsoft.com/kb/834489。

老丝Pro2020/03/17 11:54:41

就像其他人建议的那样，您可以直接在Ajax调用中设置用户名和密码：

$.ajax({
  username: username,
  password: password,
  // ... other parameters.
});

OR use the headers property if you would rather not store your credentials in plain text:

$.ajax({
  headers: {"Authorization": "Basic xxxx"},
  // ... other parameters.
});

Whichever way you send it, the server has to be very polite. For Apache, your .htaccess file should look something like this:

<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

Explanation:

For some cross domain requests, the browser sends a preflight OPTIONS request that is missing your authentication headers. Wrap your authentication directives inside the LimitExcept tag to respond properly to the preflight.

Then send a few headers to tell the browser that it is allowed to authenticate, and the Access-Control-Allow-Origin to grant permission for the cross-site request.

在某些情况下，*通配符不能用作Access-Control-Allow-Origin的值：您需要返回被叫方的确切域。使用SetEnvIf捕获此值。

Pro十三2020/03/17 11:54:40

或者，只需使用1.5中引入的headers属性：

headers: {"Authorization": "Basic xxxx"}

参考：jQuery Ajax API

GO路易西门2020/03/17 11:54:40

使用jQuery的beforeSend回调添加带有身份验证信息的HTTP标头：

beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer