带有 HTTP 基本身份验证的 Angular 6 HTTP Get 请求

Posted 2023-02-22

【中文标题】带有 HTTP 基本身份验证的 Angular 6 HTTP Get 请求

【英文标题】：Angular 6 HTTP Get request with HTTP-Basic authentication

【发布时间】：2019-05-05 21:56:46

【问题描述】：

我正在尝试使用基本身份验证访问 URL。

URL 返回 JSON 数据。

如何在下面的这个 http 请求中添加我的用户名和密码？

private postsURL = "https://jsonExample/posts";

getPosts(): Observable<AObjects []>
    return this.http.get<AObjects[]>(this.postsURL); 

【问题讨论】：

你能用post方法代替get吗？如果您使用的是get，那么您应该将凭据附加到请求的标头

看看这里：***.com/a/34465070/4736140

【参考方案1】：

参考https://angular.io/guide/http或https://v6.angular.io/guide/http#adding-headers

import  HttpHeaders  from '@angular/common/http';

const httpOptions = 
  headers: new HttpHeaders(
    'Content-Type':  'application/json',
    'Authorization': 'Basic ' + btoa('username:password')
  )
;

然后使用标题：

return this.http.get<AObjects[]>(this.postsURL, httpOptions); 

【讨论】：

非常感谢。我试试这个，我得到这个作为响应访问来自原点'localhost:9000'的 XMLHttpRequest 在 'localhost:9000' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：确实没有 HTTP ok 状态。

@YupYup 请针对新问题提出新问题。 Basic Auth 和 CORS 是两个截然不同的东西。

我添加了 httpOptions 作为您的建议。但现在我有一个新问题。问题是获取请求转换为选项请求并且服务器不支持选项方法。如何以 Get not Options 的形式发送请求？

@kira 你在用http.get() 吗？您是否使用任何与不同方法相关的标头，例如飞行前请求？

是的，我正在使用 http.get()。我写了一个问题Question

【参考方案2】：

我不知道您在获得授权后究竟想做什么，但是要使用带有基本身份验证的简单调用获得授权，您需要这样做：

let authorizationData = 'Basic ' + btoa(username + ':' + password);

const headerOptions = 
    headers: new HttpHeaders(
        'Content-Type':  'application/json',
        'Authorization': authorizationData
    )
;

this.http
    .get('url',  headers: headerOptions )
    .subscribe(
        data =>  // json data
            console.log('Success: ', data);
        ,
        error => 
            console.log('Error: ', error);
        );

【讨论】：

对于 headers: headerOptions 。我遇到问题：不能分配为 RequestOptions

请注意，这对于非 ascii 字符会失败：developer.mozilla.org/en-US/docs/Glossary/…