VueJS中用Basic Auth访问Endpoint报401，代码是否正确？

数据老陈

2026-5-26

你的VueJS请求写法不正确，这是修复方案

首先明确说：不是的，你当前传递用户名和密码的方式不符合HTTP基本认证的标准规范，这就是服务器返回401未授权错误的主要原因。

为什么你的写法不对？

你把username和password直接放在$http.get的配置对象里，Vue的$http（通常指vue-resource）并不会自动把这些参数转换成服务器能识别的认证信息，服务器无法验证你的身份，所以返回401。

正确的HTTP基本认证写法

HTTP基本认证要求将用户名和密码拼接成用户名:密码的字符串，然后用Base64编码，最后通过Authorization请求头传递给服务器。下面是调整后的代码：

created () {
  const username = 'xxxxxxx';
  const password = 'xxxxx';
  // 拼接并编码认证字符串（浏览器环境用btoa，Node.js环境用Buffer.from(`${username}:${password}`).toString('base64')）
  const authCredentials = btoa(`${username}:${password}`);

  this.$http.get(URL, {
    headers: {
      // 设置Authorization请求头
      'Authorization': `Basic ${authCredentials}`
    }
  }).then(response => {
    console.log(response);
  }).catch(error => {
    // 别忘了捕获错误，方便排查问题
    console.error('请求失败:', error);
  });
}

额外提示：如果你用的是Axios（更主流的Vue请求库）

如果你的项目用的是Axios而不是vue-resource，Axios提供了更简洁的auth配置项，它会自动帮你处理Base64编码和请求头设置：

created () {
  axios.get(URL, {
    auth: {
      username: 'xxxxxxx',
      password: 'xxxxx'
    }
  }).then(response => {
    console.log(response);
  }).catch(error => {
    console.error('请求失败:', error);
  });
}