Angular 6使用HTTP Basic认证进行HTTP Get请求

Question

我正在尝试使用基本认证访问URL。

该URL返回JSON数据。

我该如何将我的用户名和密码添加到以下HTTP请求中？

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

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

- YupYup

---

你能否使用 post 方法替代 get 方法吗？如果你正在使用 get 方法，则应将凭据附加到请求头中。 - komron

请看这里：https://dev59.com/JVsW5IYBdhLWcg3w66qH#34465070 - komron

Answer 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); 

- Daniel W.

---

我尝试了这个，然后得到了以下响应：XMLHttpRequest 访问 'wwww.xxxxxx.de/re' 时，由于 CORS 策略被阻止，源 'http://localhost:9000' 无法访问：预检请求的响应未能通过访问控制检查：它没有 HTTP ok 状态。 - YupYup

@YupYup请针对新问题提出新的问题。基本身份验证和CORS是两个非常不同的东西。 - Daniel W.

我按照你的建议添加了httpOptions。但现在我有一个新问题。问题是get请求被转换为options请求，而服务器不支持options方法。我该如何发送get请求而不是options请求？ - Geshe

@kira 你是否在使用 http.get()？你是否使用了任何与不同方法相关的头信息，例如预检请求？ - Daniel W.

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

你好，btoa(username:password) 中存在一些字符问题，例如üçşğöÖŞĞ？我该如何解决？ - zdnmn

Answer 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);
        });

- Mohammad Khodabandeh

---

对于 {headers: headerOptions}，我遇到了问题：无法分配为 RequestOptions。 - ronypatil

请注意，这对于非ASCII字符会失败：https://developer.mozilla.org/zh-CN/docs/Glossary/Base64#the_unicode_problem - daniel-sc

Answer 3

由于已被弃用，以下可能是比https://dev59.com/R1QJ5IYBdhLWcg3wimk1#53613780更清晰的解决方案。

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

const username = 'JohnDoe'
const password = 'JonhnsSecret'

const token = Buffer.from(`${username}:${password}`, 'utf8').toString('base64');

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'Basic ' + token)
  })
};

然后使用标题：

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

- Kvothe