使用Axios进行Basic Auth时如何禁用或隐藏用户名密码提示弹窗

问题原因 #

浏览器弹出原生用户名密码输入框，是因为接口认证失败返回401状态码时，响应头携带了标准的WWW-Authenticate: Basic字段，浏览器识别到该字段就会自动触发Basic认证弹窗。

解决方法 #

• 方案1（最推荐，适配性最好）：后端调整响应头 #

接口认证失败返回401时，后端删除WWW-Authenticate: Basic响应头，或者将其修改为自定义值（比如WWW-Authenticate: CustomBasic），浏览器识别到不是标准的Basic认证标识，就不会弹出登录提示框。

• 方案2（前端兼容，无需修改后端）：调整Axios请求配置 #

如果无法修改后端逻辑，可在现有请求配置中新增X-Requested-With请求头，标识当前是AJAX异步请求，多数服务端框架会针对AJAX请求自动调整401响应的头信息，避免触发弹窗。你现有手动拼接Authorization头的方式是正确的，不要使用Axios自带的auth配置项（该配置会让浏览器接管认证逻辑，更容易触发弹窗）。

修改后的代码示例：

var base64encodedData = Buffer.from(this.username + ':' + hash.hex()).toString('base64');

var config = {
  headers: { 
    'Authorization' : 'Basic '  + base64encodedData,
    'X-Requested-With': 'XMLHttpRequest' // 新增AJAX请求标识头
  },
  responseType: 'json',
  // 如果不需要跨域携带Cookie，可新增下一行配置，进一步降低弹窗概率
  // withCredentials: false
};

axios.get('/users/self',config)
  .then((response) => {
    console.log("response");
    console.log(response);
    console.log(response.data);
  })
  .catch((err) => {
    // 自行捕获401错误做业务处理，例如跳转自定义登录页
    if (err.response?.status === 401) {
      // 自定义未登录逻辑
    }
  });

内容的提问来源于stack exchange，提问作者Jacob