ReactJS中Axios GET请求返回空数组但Postman数据正常的问题

在ReactJS组件中实现登录功能，通过Axios发起两次API调用：

1. 第一次发送用户邮箱和密码获取JWT令牌，调用正常
2. 第二次使用该令牌从后端获取用户专属笔记，ReactJS代码返回空数组，但Postman中相同调用能返回预期数据

代码片段 #

async function login(event){
  event.preventDefault();
  setUser({ email: "", password: "" });
  console.log("login email: " + user.email + " & password " + user.password);
  
  // Request to login and get token in response
  try {
    const loginResponse = await axios.post('http://localhost:5000/auth/login', {
      emailid: user.email,
      password: user.password
    });
    
    console.log('login successful: ', loginResponse.data.token);
    const token = loginResponse.data.token;
    console.log("token value: " + token);
    
    // Use token to get all notes of user
    let config = {
      method: 'get',
      maxBodyLength: Infinity,
      url: 'http://localhost:5000/api/read',
      headers: { 
        'Authorization': `Bearer ${token}`, 
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: QueryString.stringify({
        'email': user.email 
      })
    };
    
    const allNotes = await axios.request(config);
    console.log("data ", allNotes);
    
    // Further state updates
    // setNotes(allNotes);
    // setAuthenticated(true);
    
  } catch (error) {
    console.log("Login Error: " + error);
  }
}

已完成排查 #

• 确认令牌和用户邮箱已正确传入请求头和请求体
• 通过Postman验证后端API功能正常

问题原因 #

核心问题是GET请求携带参数的方式不符合HTTP规范：

• HTTP规范中GET请求没有请求体（Body），Axios虽然允许配置data参数，但不同浏览器/环境对GET请求Body的处理不一致，后端大概率无法解析这部分数据
• Postman中发送GET请求时，你实际是把email放在了URL查询参数（Query Params）中，而非请求体，所以后端能正确获取参数并返回数据

解决方案 #

修改第二次API调用的参数传递方式，将email放到URL查询参数中，而非请求体：

修改后的代码 #

async function login(event){
  event.preventDefault();
  setUser({ email: "", password: "" });
  console.log("login email: " + user.email + " & password " + user.password);
  
  try {
    const loginResponse = await axios.post('http://localhost:5000/auth/login', {
      emailid: user.email,
      password: user.password
    });
    
    console.log('login successful: ', loginResponse.data.token);
    const token = loginResponse.data.token;
    console.log("token value: " + token);
    
    // 改用查询参数传递email，简化GET请求写法
    const allNotes = await axios.get('http://localhost:5000/api/read', {
      headers: { 
        'Authorization': `Bearer ${token}`
      },
      params: {
        email: user.email 
      }
    });
    
    console.log("data ", allNotes.data);
    
    // 后续状态更新
    setNotes(allNotes.data);
    setAuthenticated(true);
    
  } catch (error) {
    console.log("Login Error: ", error);
  }
}

额外注意事项 #

1. 移除了Content-Type: application/x-www-form-urlencoded请求头：GET请求无需设置该头，后端基于查询参数解析时该头无意义
2. 使用axios.get简化请求写法，替代axios.request，逻辑更直观
3. 确认后端是从查询参数中获取email：如果后端原本期望从GET请求Body拿数据，需要同步修改后端逻辑（GET请求带Body属于不规范用法，兼容性极差）

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