使用 OPTIONS 方法未使用 http 请求 Angular 6 发送授权标头

Posted 2023-03-04

【中文标题】使用 OPTIONS 方法未使用 http 请求 Angular 6 发送授权标头

【英文标题】：Authorization header not sent with http request angular 6 with OPTIONS method

【发布时间】：2018-12-30 06:24:51

【问题描述】：

我在使用 Angular 代码发送 post 请求时收到 401 错误，当我检查网络请求时，我发现标头没有随 post 请求一起发送，请看图片：

auth.service.ts

login(username: string, password: string) 
    let httpHeaders = new HttpHeaders(
      'Authorization': 'Basic bXktdHJ1c3RlZC1jbGllbnQ6c2VjcmV0',
      'Content-Type': 'application/json'
    );
    let options = 
      headers: httpHeaders
    ;
    this.http.post(
      'http://localhost:8080/SpringSecurityOAuth2Example/oauth/token?grant_type=password&username=bill&password=abc123',
      null,
      options
    ).subscribe(res => 
      console.log(res);
    ,
      err => 
        console.log(err);
      
    );

请求缺少的标头

虽然我的服务器上启用了 CORS，但似乎不是 CORS 问题

【问题讨论】：

问题中的请求标头似乎是浏览器自动发送的 CORS preflight OPTIONS 请求。不包含 Authorization 标头的原因是 CORS 规范要求浏览器从不发送 Authorization 标头或任何其他凭据作为预检 OPTIONS 请求的一部分。因此，如果您发送请求的服务器必须允许未经身份验证的 OPTIONS 请求 - 不需要 Authorization 标头 - 如果不允许，则预检将失败并且浏览器仍然停在那里，甚至从不尝试来自您的 POST 请求代码。

@sideshowbarker 感谢您指出，我进行了更改以跳过 OPTIONS 方法的身份验证并且它有效。你拯救了我的一天！

【参考方案1】：

let options = 
  headers: httpHeaders
;

这应该是 RequestOptions 对象而不是普通对象。 Angular HttpClient 无法识别它。改成

let options = new RequestOptions( headers: headers );

【讨论】：

RequestOptions 已弃用 Angular 6