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

【问题标题】：OAuth token Unauthorized on browserOAuth 令牌在浏览器上未经授权
【发布时间】：2019-04-19 12:59:55
【问题描述】：

我使用的是 Angular 7，但标题有问题。

这是我的代码：

    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 })

与

让参数：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);
    };

【问题讨论】：

标签： java angular oauth-2.0 http-headers angular7

【解决方案1】：

您需要在post 中传递HttpHeaders。检查here

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

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

【讨论】：

感谢您的回复，但这不是问题所在。这是请求签名的问题。

【解决方案2】：

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

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 })

与

让参数：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);
    };

【讨论】：