Javascript 基本身份验证Angular2（非CORS）

我目前正试图使用

HttpClient

通过Angular 4调用我在本地运行的

localhost:8080

上的

jersey

RESTAPI

我的代码： ```

```

当我打这个电话时，我收到一个

401

错误，说我

未经授权。然而，当我通过邮递员查看这篇文章时，一切都很顺利。我做错了什么

注意：这不是CORS问题，我目前通过firefox上的扩展允许CORS
我认为问题在于您没有将自定义请求头传递给
HttpClient
，这导致了未经授权的错误

请试试这样的

const headers = new HttpHeaders();
headers.append('Authorization', 'Basic ' + btoa('username:password'));
headers.append('Content-Type', 'application/json');
const options = new RequestOptions({headers: headers});

this.http.get('http://localhost:8080/mycall?myparam=myvalue', options ).subscribe(data => {
  console.log(data);
});

您只需将
RequestOptions
传递到
http.get
，因为它接受头作为可选参数。请查看以下链接以了解有关用法的更多详细信息


另外，还记得导入
RequestOptions
。
我认为问题在于您没有将自定义请求头传递给
HttpClient
，这导致了未经授权的错误

请试试这样的

const headers = new HttpHeaders();
headers.append('Authorization', 'Basic ' + btoa('username:password'));
headers.append('Content-Type', 'application/json');
const options = new RequestOptions({headers: headers});

this.http.get('http://localhost:8080/mycall?myparam=myvalue', options ).subscribe(data => {
  console.log(data);
});

您只需将
RequestOptions
传递到
http.get
，因为它接受头作为可选参数。请查看以下链接以了解有关用法的更多详细信息


另外，还记得导入
RequestOptions
。
HttpHeaders是不可变的，所以您需要这样做

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

    this.http.get('http://localhost:8080/mycall?myparam=myvalue', {headers: headers}).subscribe(data => {
      console.log(data);
    });
  }

实际上，GET请求不需要这里的内容类型，HttpHeaders是不可变的，所以需要这样做

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

    this.http.get('http://localhost:8080/mycall?myparam=myvalue', {headers: headers}).subscribe(data => {
      console.log(data);
    });
  }

实际上，GET请求不需要此处的内容类型
是否在服务器上调试并查看原因？服务器上没有消息@epascarello使用浏览器开发工具。在“网络”选项卡下，查看您的api真正发送的标题是什么。您是否在服务器上调试并查看原因？服务器上没有消息@epascarello使用您的浏览器开发工具。在“网络”选项卡下，查看您的api真正发送的标题是什么。很抱歉，我更新了这个问题，所以这就是我最初使用它的方式@woodykiddy。另外，请注意，
RequestOptions
已被弃用@woodykiddy@M.Barbieri显然，您可以使用匿名对象，而不是实例化
RequestOptions
对象，就像
constoptions={headers:headers}
，但如果仍然出现401错误，那也没关系。您是否检查了
btoa（）
是否实际返回了正确的值？很抱歉，我更新了这个问题，因此@woodykiddy也是这样。请注意
RequestOptions
已被弃用@woodykiddy@M.Barbieri显然，您可以使用匿名对象，而不是实例化
RequestOptions
对象，就像
constoptions={headers:headers}
，但如果仍然出现401错误，那也没关系。您是否检查了
btoa（）
是否实际返回了正确的值？非常漂亮，谢谢。我不知道HttpHeaders是不可变的@DavidDo你知道有没有办法不向请求提供用户名和密码，让浏览器触发登录@David@M.Barbieri我认为使用ajax调用是不可能的，你的意思是使用Angular HttpClient是不可能的，因为使用ajax是绝对可能的，你所要做的就是省去身份验证@David@M.巴比里我其实觉得用阿贾克斯是不可能的，谢谢你。我不知道HttpHeaders是不可变的@DavidDo你知道有没有办法不向请求提供用户名和密码，让浏览器触发登录@David@M.Barbieri我认为使用ajax调用是不可能的，你的意思是使用Angular HttpClient是不可能的，因为使用ajax是绝对可能的，你所要做的就是省去身份验证@David@M.事实上，巴比里我认为ajax本身是不可能的