React实现邮箱密码登录遇401错误，需匹配Postman认证方式

AI 小北

2026-8-21

解决React登录接口401问题的方案

问题核心

你的401错误源于后端要求通过请求头的Authorization字段完成身份认证，而非将邮箱密码放在请求体中传递，这与你当前的代码实现逻辑不匹配。

具体实现方案

1. 明确认证类型

从Postman的操作来看，后端采用的是Basic Auth认证方式：它会将邮箱:密码的字符串做Base64编码，再以Basic 编码结果的格式放入请求头的Authorization字段中。

2. 修改React请求代码

基于Axios的实现

import axios from 'axios';

const handleLogin = async (email, password) => {
  // 拼接邮箱密码并做Base64编码
  const authStr = btoa(`${email}:${password}`);
  // 构造包含认证信息的请求头
  const requestHeaders = {
    'Authorization': `Basic ${authStr}`
  };

  try {
    // 按后端要求用GET请求发送（从错误信息看接口是GET类型）
    const res = await axios.get('https://login.xxx.com/login/', { headers: requestHeaders });
    // 处理返回的Token数据
    localStorage.setItem('authToken', res.data.token);
    console.log('登录成功');
  } catch (err) {
    console.error('登录失败:', err.response?.data || err.message);
  }
};

基于原生Fetch的实现

const handleLogin = async (email, password) => {
  const authStr = btoa(`${email}:${password}`);
  
  const res = await fetch('https://login.xxx.com/login/', {
    method: 'GET',
    headers: {
      'Authorization': `Basic ${authStr}`
    }
  });

  if (!res.ok) {
    throw new Error(`登录失败：${res.statusText}`);
  }
  
  const data = await res.json();
  localStorage.setItem('authToken', data.token);
  console.log('登录成功');
};