OAuth令牌在浏览器上未经授权

Question

我正在使用Angular 7，我遇到了Headers问题。

这是我的代码：

    signin() {
    let signinData = this.signinForm.value;

    this.encoded = btoa("my-trusted-client:secret");

    let header = new Headers();

    header.append('Authorization', 'Basic ' + this.encoded);

    header.append('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

    this.http.post(this.url + '/oauth/token?grant_type=password&username=' + signinData.username + '&password=' + signinData.password, { headers: header })
    .subscribe(data => {
      console.log(data);
     })
    }

输出错误：

错误：“未经授权”

消息：“未经授权”

路径：“/ barometre / oauth / token”

状态：401

时间戳：“2019-04-19T12：35：47.699 + 0000”

当我在Postman上测试时，我得到了结果：

编辑：

问题出在请求签名上。我改变了这个：

this.http.post(this.url + '/oauth/token?grant_type=password&username=' + signinData.username + '&password=' + signinData.password, { headers: header })

这样：

this.http.post(this.url + '/oauth/token', params, { headers: header })

同

让params：URLSearchParams = this.serialize（this.data）;

并生成新的功能

serialize(obj: any): URLSearchParams {
        let params: URLSearchParams = new URLSearchParams();

        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                var element = obj[key];
                params.set(key, element);
            }
        }
        return params;
        console.log(params);
    };

Answer 1

你需要在qazxsw poi中传递qazxsw poi。检查qazxsw poi

HttpHeaders

还要确保您的授权令牌有效。

Answer 2

问题出在请求签名上。我改变了这个：

post

这样：

here

同

让params：URLSearchParams = this.serialize（this.data）;

并生成新的功能

const header= {
  headers: new HttpHeaders({
    'Content-Type':  'application/x-www-form-urlencoded; charset=utf-8',
    'Authorization': 'Basic ' + this.encoded
  })
};