連接到Angular中的TFS Api，未授權401

Question

我在第一個Angular應用中遇到了API獲取請求的問題。 我正在嘗試從服務器獲取所有項目，我具有正確的url（即使在郵遞員中也可以在我的瀏覽器中使用），我也從TFS帳戶中生成了令牌，但是，我仍然得到了一個當我運行應用程序時，在控制台中未授權401。 任何幫助將不勝感激。 我需要提供Windows身份驗證嗎？ 在Angular上甚至可能嗎？

這是我嘗試運行的方法。 所有導入都在那里，該方法從OnInit調用。

  getProjects(): void {
    const authHeader = new HttpHeaders(); 
    authHeader.append('Authorization', 'Bearer ' + 
    `perfectly valid token here`);
    this.http.get('perfectly valid server url here/_apis/projects?api-
    version=1.0', {headers: authHeader}).subscribe(data => {
      this.results = data['results'];
    });
  }

Answer 1

我已經使用基本身份驗證來工作了。

getProjects(): void {
    const authHeader = new HttpHeaders(); 
    authHeader.append('Authorization', 'Basic ' + 
    base64('Username:Password'));
    this.http.get('perfectly valid server url here/_apis/projects?api-
    version=1.0', {headers: authHeader}).subscribe(data => {
      this.results = data['results'];
    });
  }

Answer 2

您可以嘗試提供Windows身份驗證，它在Angular上可用。 並在項目中啟用CORS。

然后，檢查下面的跨域資源共享（CORS）示例，以在代碼中添加授權：

$( document ).ready(function() {
    $.ajax({
        url: 'https://fabrikam.visualstudio.com/defaultcollection/_apis/projects?api-version=1.0',
        dataType: 'json',
        headers: {
            'Authorization': 'Basic ' + btoa("" + ":" + myPatToken)
        }
    }).done(function( results ) {
        console.log( results.value[0].id + " " + results.value[0].name );
    });
});

您可以參考這些文章以進行進一步的故障排除：

• AngularJS和Web API Active Directory安全
• 如何使用獨立Web API在AngularJS應用程序中實現Windows身份驗證