React中Axios PUT请求认证陷入无限循环问题求助

核心问题分析 #

你的代码里存在两个导致PUT请求认证失败的关键错误：

1. Authorization头格式错误：代码里的"Authorization": + basicAuth多了一个多余的+号，这会把basicAuth字符串强制转换为NaN，服务器无法识别无效的认证头，直接导致认证失败。
2. PUT请求参数位置错误：axios的put方法参数顺序是url, 请求体数据, 配置对象，你把业务参数放在了配置对象里，服务器无法收到正确的请求数据，可能返回400或401状态码，触发浏览器的重复认证弹窗。

修正后的代码 #

GET请求代码（修正认证头错误）

var session_url = '';
var username = '';
var password = '';
var basicAuth = 'Basic ' + btoa(username + ':' + password);
axios.get(session_url, {
  headers: { 
    "Authorization": basicAuth, // 移除多余的+号
    "Accept": "application/json",
    "Content-Type": "application/json"
   }
}).then((getData) => {
    console.log(getData.data);
    setApiData(getData.data);
    console.log('Authenticated');
}).catch(function(error) {
  console.log('Error on Authentication', error);
});

PUT请求代码（修正参数位置+认证头）

var session_url = '';
var username = '';
var password = '';
var basicAuth = 'Basic ' + btoa(username + ':' + password);
axios.put(session_url, 
  // 把业务参数作为请求体传入第二个参数
  {
    "parameters":{ 
      "Name": name,
      "Email": email
    }
  },
  // 配置对象放在第三个参数
  {
    headers: { 
      "Authorization": basicAuth, // 移除多余的+号
      "Accept": "application/json",
      "Content-Type": "application/json"
     }
  }
).then(function(response) {
  console.log('Authenticated');
  alert("success");
}).catch(function(error) {
  console.log('Error on Authentication', error.response); // 打印详细错误信息
});

额外注意事项 #

• 如果用户名/密码包含中文或非ASCII字符，btoa会编码失败，需要先转成UTF-8格式：

  var basicAuth = 'Basic ' + btoa(unescape(encodeURIComponent(username + ':' + password)));
  

• 建议在catch中打印error.response，查看服务器返回的具体状态码和响应内容，进一步排查是否存在API权限、参数格式等其他问题。

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