ReactJS表单提交遇401 Unauthorized，Postman正常的修复方案

我帮你排查了代码里的问题，主要是请求头配置错误和数据格式不匹配导致的，下面是具体的修改点和修复后的代码：

核心问题分析 #

1. headers配置位置错误：你把headers放在了不存在的body属性里，axios根本不会读取这个位置的头部信息，导致请求没有带上正确的Content-Type和Accept头，后端无法正确解析你的凭证。
2. 数据格式不匹配：你用了FormData构造请求体，这会让浏览器自动设置Content-Type为multipart/form-data，但Postman里你应该用的是application/x-www-form-urlencoded格式（这是表单提交的常见格式），后端解析时拿不到正确的email和password，所以返回401。

修复后的代码（推荐方案） #

这个方案和Postman的请求格式完全对齐，用URLSearchParams构造符合x-www-form-urlencoded格式的数据：

submitLogin(event){
  event.preventDefault();
  
  // 构造符合x-www-form-urlencoded格式的请求数据
  const loginParams = new URLSearchParams();
  loginParams.append('email', this.state.email);
  loginParams.append('password', this.state.password);

  axios({
    method: 'post',
    url: 'http://127.0.0.1:8000/api/auth/login',
    data: loginParams,
    // 正确配置请求头，和Postman保持一致
    headers: {
      'Accept': 'application/json'
      // 不需要手动设置Content-Type，URLSearchParams会让axios自动设置正确的头部
    }
  }).then(function(response){
    console.log('登录成功:', response);
  }).catch(function (error){
    // 打印更详细的错误信息，方便排查
    console.error('登录失败:', error.response?.data || error.message);
  })
}

另一种可选方案（手动转换数据格式） #

如果你更习惯用对象存储数据，可以手动把对象转换为x-www-form-urlencoded格式：

submitLogin(event){
  event.preventDefault();
  
  const loginData = {
    email: this.state.email,
    password: this.state.password
  };

  axios({
    method: 'post',
    url: 'http://127.0.0.1:8000/api/auth/login',
    data: loginData,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/json'
    },
    // 把对象转换为x-www-form-urlencoded格式的字符串
    transformRequest: [(data) => {
      return Object.keys(data)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
        .join('&');
    }]
  }).then(function(response){
    console.log('登录成功:', response);
  }).catch(function (error){
    console.error('登录失败:', error.response?.data || error.message);
  })
}

额外排查建议 #

• 打开浏览器的开发者工具（F12），查看Network标签里的登录请求，对比Postman的请求头和请求体，确保两者完全一致
• 如果后端期望的是JSON格式（Postman里用raw JSON），那直接传JSON对象，设置Content-Type: application/json即可，不用上面的x-www-form-urlencoded格式

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