React中Authorization Header失效：OAuth认证Rest客户端正常但React报401

我一眼就看到你代码里的一个关键错误，这大概率是导致401的核心原因：

在请求body里你用了&作为参数分隔符，但这是HTML实体转义字符，在JavaScript字符串中会被原样发送给服务器。服务器解析的时候，会把&password当成一个完整的参数名，而不是把password作为独立参数——这样服务器根本获取不到正确的用户名、密码和授权类型，自然返回401未授权。

修正后的代码 #

把body里的&替换成普通的&即可：

let UserAPI = {
  login(username, password){
    const requestOptions = {
      method: 'POST',
      headers: {
        'Authorization': 'Basic ' + btoa('livechat-api-client:livechat'),
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
      },
      body: `username=${username}&password=${password}&grant_type=password`
    };
    return fetch('http://localhost/cronos/oauth/token', requestOptions)
      .then(response => {
        if (!response.ok) {
          return Promise.reject(response.statusText);
        }
        return response.json();
      })
      .then(user => {
        // login successful if there's a jwt token in the response
        if (user && user["access_token"]) {
          // store user details and jwt token in local storage to keep user logged in between page refreshes
          localStorage.setItem('user', JSON.stringify(user));
        }
        return user;
      });
  }
}
export default UserAPI;

额外检查点（如果修正后仍有问题） #

• 确认btoa('livechat-api-client:livechat')编码的内容和你在Rest客户端里用的完全一致，有时候大小写或者特殊字符会导致编码差异
• 检查服务器的CORS配置：React开发环境通常是http://localhost:3000，要确保服务器允许这个Origin的请求，并且允许携带Authorization请求头
• 打开浏览器开发者工具的Network标签，查看发送的请求详情：确认Form Data里的参数是否正确解析，以及Authorization头是否正常发送

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