JS中使用Fetch API发起Basic认证请求持续返回401错误排查

你当前代码存在几个直接导致认证失败的问题，按影响优先级排序：

• 最核心错误：fetch配置中添加了mode: "no-cors"
  该模式下浏览器仅允许发送极少数合规的简单请求头，你手动添加的Authorization认证头会被浏览器直接拦截丢弃，根本不会发送到API服务端，服务端收不到认证信息自然返回401。同时no-cors模式返回的是不透明响应，就算请求成功你也无法读取响应内容，调用response.json()会直接抛出错误。
• 无效配置问题：手动添加了Host请求头
  Host属于浏览器禁止手动修改的保留请求头，会由浏览器自动填充，手动声明该头反而会触发浏览器的请求安全校验，导致头信息被篡改或丢弃。另外GET请求不需要携带Content-Type头，多余配置反而可能触发预检请求异常。
• 语法问题：response.json()是异步方法，必须加await才能拿到实际返回结果，直接打印只会得到pending状态的Promise对象。
• 跨域限制问题：你用HTTPie能请求成功，是因为命令行工具不受浏览器同源策略约束，但纯前端页面直接调用第三方API时，需要对方服务端配置了允许你当前页面域名的CORS响应头，否则就算认证信息正确，浏览器也会拦截返回结果。

修复步骤 #

1. 删除mode: "no-cors"配置，同时移除手动设置的Host、Content-Type无效请求头。
2. 给response.json()添加await关键字，补充请求状态判断和错误捕获逻辑，方便定位问题。
3. 如果修改后控制台报CORS跨域相关错误，说明该API没有配置允许你的前端页面域名直接访问，不要硬改浏览器安全配置绕过，要么搭建一个简单的后端服务做请求代理，要么在本地开发工具（如Vite、VS Code Live Server）中配置代理规则转发请求，绕过浏览器同源限制。

修正后的参考代码 #

const KEY = '替换为你实际的API密钥';
const USERNAME = KEY;
const PWD = "";
const URI = 'https://api.quant-aq.com/device-api/v1/account';

async function getData(link) {
  try {
    const response = await fetch(link, {
      method: "GET",
      headers: {
        'Authorization': 'Basic ' + btoa(`${USERNAME}:${PWD}`),
        'Accept': 'application/json'
      }
    });
    if (!response.ok) {
      console.log('请求失败，状态码：', response.status);
      const errInfo = await response.text();
      console.log('错误详情：', errInfo);
      return;
    }
    const resData = await response.json();
    console.log('接口返回数据：', resData);
    // 后续在这里写站点坐标渲染到Leaflet地图的逻辑即可
    return resData;
  } catch (err) {
    console.error('请求异常：', err);
  }
}

getData(URI);

验证技巧：可以打开浏览器开发者工具的「网络」面板，找到对应请求查看实际发送的请求头列表，如果没找到Authorization字段，说明头信息被浏览器拦截了，优先检查请求模式和跨域配置；如果存在该头还是返回401，就对比btoa生成的编码值和你用HTTPie请求成功时携带的Authorization值是否一致，排查字符转义、多余空格的问题。

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