相关疑难解决方法(0)

我正在尝试Angular 4使用新发布的实现基本授权HttpClient.

我正在尝试连接到使用公开API Spring运行的应用程序.TomcatREST

我的代码中包含以下代码LoginComponent:

onSubmit(user){
   console.log(user);
   const body = JSON.stringify({username: user.userName, password: user.password});

   let headers = new HttpHeaders();
   headers.append("Authorization", "Basic " + btoa("username:password"));
   headers.append("Content-Type", "application/x-www-form-urlencoded");

   this.http.post('my url here',body, {headers: headers}).subscribe(response => {
         console.log(response);
   }, err => {
      console.log("User authentication failed!");
   });
}

但是,请求根本不添加Authorization标头.

这来自Chrome工具Network选项卡:

我究竟做错了什么？我怎样才能做到这一点？

更新1:它仍然无法正常工作:

我改变了我的两行,如下所示:

headers = headers.append("Authorization", "Basic " + btoa("username:password"));
headers = headers.append("Content-Type", "application/x-www-form-urlencoded");

我按预期在请求中获得标题.这来自Chrome:

但是,后调用仍然失败.

在服务器端,我的代码是:

protected …

我见过其他几个这样的问题,但是他们没有解决这个问题.我使用MailChimp的API进行简单调用,在注册时将成员添加到我的邮件列表中.

但是,当我测试时,我获得了401未授权,并且API抱怨没有提交API密钥.当我在Chrome中检查请求时,我看不到任何授权标头.这是我的代码:

        const formData = {
            email_address: this.emailControl.value,
            status: 'subscribed',
            merge_fields: {
                NAME: this.nameControl.value
            }
        };
        const header = new HttpHeaders({
            'Authorization': 'apikey:' + environment.mailChimpApiKey
        });

        this.http.post(this.mailChimpUrl, formData, {
            headers: header,
            observe: 'response'
        }).subscribe(response => {
            console.log('response', response);
            if (response.status === 200) {
                this.submitted = true;
            }
        });

我检查并仔细检查了HttpClient.post方法签名,以及MailChimp API如何期望接收Auth头.看起来我做的一切都正常,为什么Angular不设置标题？

我注意到值仅Access-Control-Request-Headers在我设置可选标头时发生变化.我在读Chrome控制台错了吗？

角度版本:5.2.4

我尝试使用Angular的HttpClient发送带有授权标头的请求,但标头未成功设置.

在这里我的代码.

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


constructor(private http: HttpClient,
            private auth: AuthService) {
}

sendRequest() {
  this.http.get(this.url, {
    headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.auth.getAccessToken())
  }).subscribe(
    data => {
      console.log(data);
    },
    error => {
      console.log(error);
    }
  );
}

这里是网络调试头源.

OPTIONS /userinfo HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: http://localhost:4200/user
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.8,en;q=0.6

响应头如下.

HTTP/1.1 400 …