如何在POST请求头中发送数据及Basic Auth认证数据

问题1：如何在POST请求的请求头中发送数据？ #

在AngularJS里，有两种常用方式给POST请求添加自定义请求头：

• 单次请求单独设置：调用$http.post时，通过第三个参数（配置对象）的headers属性指定请求头，示例如下：

$http.post('/api/login', requestData, {
  headers: {
    'X-Custom-Header': '自定义内容',
    'Content-Type': 'application/json'
  }
});

• 全局默认设置：如果多个请求需要复用相同请求头，可以通过$http.defaults.headers做全局配置，比如：

// 给所有POST请求添加默认头
$http.defaults.headers.post['X-Global-Header'] = '全局通用值';
// 给所有请求（GET/POST等）添加默认头
$http.defaults.headers.common['Authorization'] = '认证信息';

问题2：如何在POST请求头中提交Basic Auth认证数据？ #

你已经完成了用户名密码的Base64编码，但漏掉了Basic Auth的核心格式要求：Authorization请求头的值必须以Basic （注意后面有个空格）开头，再跟上编码后的username:password字符串。

结合你的代码，修改后的login方法可以参考下面的写法：

.factory('Auth', function (Base64, $http, AuthToken) { //用于登录/登出
  var authFactory = {};
  authFactory.login = function (loginData) {
    // 编码用户名和密码
    var authdata = Base64.encode(loginData.username + ':' + loginData.password);
    // 正确设置Basic Auth请求头：必须加上"Basic "前缀
    $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata;
    
    var userData = { username: loginData.username , authdata: authdata }
    // 后续POST请求逻辑
    return $http.post('/api/login-endpoint', userData)
      .then(function(response) {
        // 登录成功后的逻辑，比如保存token
        AuthToken.setToken(response.data.token);
        return response.data;
      }, function(error) {
        // 登录失败时清空无效的认证头
        delete $http.defaults.headers.common['Authorization'];
        return error;
      });
  };

  // 登出时记得清除认证头
  authFactory.logout = function() {
    delete $http.defaults.headers.common['Authorization'];
    AuthToken.setToken(null);
  };

  return authFactory;
});

额外提醒两点：

• 如果只有当前登录请求需要Basic Auth，建议不要全局设置$http.defaults.headers.common，而是在本次POST请求的配置里单独设置，避免影响其他不需要认证的请求：

return $http.post('/api/login-endpoint', userData, {
  headers: {
    'Authorization': 'Basic ' + authdata
  }
});

• 登录失败后一定要清除已设置的认证头，防止后续请求携带无效的认证信息。

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