向本地服务器https://localhost:5004/logs发认证数据遇401错误求助

让我们一步步拆解你遇到的问题，然后给出可行的解决方案：

首先分析你遇到的两个核心问题 #

1. 表单方式的%5Bobject%20Object%5D错误 #

你写的$('login')是jQuery语法，但如果页面没引入jQuery库，这个写法会返回一个DOM对象，而不是输入框的value值。当你把这个对象拼到URL里时，它会被转成字符串[object Object]，URL编码后就是%5Bobject%20Object%5D——这就是错误提示里奇怪用户名的来源。

另外，现代浏览器（比如Chrome 59+）在HTTPS环境下（哪怕是localhost），已经禁止通过URL明文传递用户名密码了，所以这种方式本身就不推荐使用。

2. XMLHttpRequest方式的401错误 #

你的XHR代码犯了两个关键错误：

• 你把用户名密码当成请求体通过send(str)发送，但GET请求不应该携带请求体，服务器根本不会读取这部分内容；
• 你没有设置HTTP Basic Auth要求的Authorization请求头，服务器无法识别你的凭证，自然返回401未授权。

推荐的解决方案 #

方案1：修正后的XMLHttpRequest（兼容旧浏览器） #

我们需要正确设置Basic Auth的请求头，步骤是：

1. 把login:pass拼接成字符串；
2. 用btoa()进行Base64编码；
3. 设置Authorization: Basic 编码后的字符串请求头；
4. GET请求不需要发送请求体，send()留空即可。

修正后的代码：

function authenticate(login, pass) {
  // 拼接并编码凭证
  const credentials = btoa(`${login}:${pass}`);
  const http = new XMLHttpRequest();
  const url = "https://localhost:5004/logs";
  
  http.open("GET", url, true);
  // 设置正确的Basic Auth请求头
  http.setRequestHeader("Authorization", `Basic ${credentials}`);
  
  http.onreadystatechange = function() {
    if(http.readyState === 4) {
      if(http.status === 200) {
        // 成功获取并解析JSON数据
        const responseData = JSON.parse(http.responseText);
        alert(JSON.stringify(responseData));
      } else {
        console.error(`认证失败，状态码：${http.status}`);
        alert(`错误：${http.statusText}`);
      }
    }
  };
  
  http.send(); // GET请求无需发送内容
}

方案2：更现代的Fetch API（推荐） #

Fetch API语法更简洁，支持Promise，代码可读性更高：

async function authenticate(login, pass) {
  try {
    const credentials = btoa(`${login}:${pass}`);
    const response = await fetch("https://localhost:5004/logs", {
      method: "GET",
      headers: {
        "Authorization": `Basic ${credentials}`
      }
    });
    
    if (!response.ok) {
      throw new Error(`HTTP错误！状态码：${response.status}`);
    }
    
    // 解析返回的JSON数据
    const data = await response.json();
    console.log("获取到的数据：", data);
    alert(JSON.stringify(data));
  } catch (error) {
    console.error("认证失败：", error);
    alert(error.message);
  }
}

（可选）如果一定要用表单跳转（不推荐） #

如果你坚持要用表单方式，需要修复元素获取的问题，并且编码用户名密码防止特殊字符破坏URL，同时阻止默认表单提交：

<form onsubmit="event.preventDefault(); 
  const login = document.getElementById('login').value;
  const pass = document.getElementById('pass').value;
  // 编码特殊字符避免URL出错
  const encodedLogin = encodeURIComponent(login);
  const encodedPass = encodeURIComponent(pass);
  document.location = `https://${encodedLogin}:${encodedPass}@localhost:5004/logs`;">
 <input type="text" name="login" id="login" placeholder="用户名"/>
 <input type="password" name="pass" id="pass" placeholder="密码"/>
 <input type="submit" value="登录"/>
</form>

⚠️ 注意：这种方式在新版本Chrome、Firefox等浏览器中可能被阻止，因为HTTPS下禁止URL明文传递凭证。

额外注意事项 #

• 如果用户名/密码包含中文或其他Unicode字符，btoa()会报错，这时候需要先转成UTF-8编码再处理：

  const credentials = btoa(unescape(encodeURIComponent(`${login}:${pass}`)));
  

• 确保你的服务器端正确配置了HTTP Basic Auth，能识别Authorization头中的凭证，并且返回正确的JSON格式数据。

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