如何在angular4中使用用户名和密码设置授权标头

Question

我正在远程使用 Java Rest API 服务。他们正在发送用户名和密码以及授权服务。在这里，我使用的是 angular6，我传递的标题有问题。下面是我的代码

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders} from '@angular/common/http';
import { Http, Response } from '@angular/http';
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { HttpModule } from '@angular/http';
`
@Injectable()

export class MasterService{

constructor(private http:HttpClient) { }

getApi(url): Observable<any> {
let headers = new HttpHeaders();
headers = headers.append('Content-Type', 'application/json');
headers = headers.append("Authorization", "Basic YWRtaW46YWRtaW4=");
headers = headers.append('Access-Control-Allow-Origin', '*');
headers = headers.append('UserName', 'admin');
headers = headers.append('password', 'admin');
return this.http.get(url,{ headers:headers })
  .map((res) => {
    console.log(res);
    return res;
}).catch(this.handleErrorObservable);
}
}
`

我遇到了这样的错误

OPTIONS http://publicIp/coms/getEnterpriseCutomerDtls?custid=10 401 
(Unauthorized)

Access to XMLHttpRequest at 'http://publicIp/coms/getEnterpriseCutomerDtls? 
custid=10' from origin 'http://localhost:4200' has been blocked by 
CORSpolicy: Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource.

提前致谢

Answer 1

前段时间我也有同样的问题，请看这里：angular-2-authentication-headers

在您的标头授权中，您必须拥有已加密的用户名和密码，如下所示：

headers = headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));

并始终确保您的 CORS 策略在您的后端正确配置，因此我遇到了几个问题...