Angular 5 HTTPClient 基本授权不起作用

Posted

技术标签:

【中文标题】Angular 5 HTTPClient 基本授权不起作用【英文标题】:Angular 5 HTTPClient Basic Authorization not working 【发布时间】:2018-11-03 17:22:35 【问题描述】:

我正在尝试在 Angular 5 中实现基本授权。我正在使用 HttpClient 和 HttpHeaders。我正在尝试使用 REST 服务连接到 tomcat 服务器。

此代码在我的登录功能中。

this.storage.set('credentials', credentials);
return new Promise((resolve, reject) => 
    let headers = new HttpHeaders();
    //btoa permet d'encoder le username et le mot de passe en base64
    headers = headers.append("Authorization", "Basic " + btoa(credentials.username + ':' + credentials.password));
    headers = headers.append("Content-Type", "application/x-www-form-urlencoded");

    //utilisation de stateless pour ne créer qu'une session http et ne pas créer une session par requete
    this.http.post(apiUrl+'ADUser', JSON.stringify(l: credentials.username, p: credentials.password), headers:headers )
      .subscribe(res => 
        resolve((res: Response) => res.json());
      , (err) => 
        console.log(err);
        reject();
        let alert = this.alertCtrl.create(
        title: 'L\'authentification a échoué',
        subTitle: 'Le nom d\'utilisateur ou le mot de passe est incorrect',
        buttons: ['OK']
      );
      alert.present();
      );
);    

This is from the Chrome tools Network tab

查看论坛和本网站后,我还没有找到解决问题的方法。 有人可以帮我解决这个问题吗?

提前感谢您的回复和帮助我的时间

【问题讨论】:

如果我没记错的话,Angular 的 post 请求第二个参数应该是一个对象,而不是字符串,也许删除 JSON.stringify 感谢您的回复。 this.http.post(apiUrl+'ADUser', credentials, headers:headers)如果我这样做,它也不起作用 【参考方案1】:

这是我用来发布带有凭据的数据的一段代码:

postData(appurl: string, data: string) 

    let body = new URLSearchParams();
    body.set("data", encodeURIComponent(data));

    const opt = 
      headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
      withCredentials: true
    ;

    return this.http.post(appurl, body.toString(), opt);


我希望这会有所帮助...

顺便说一句,我使用 HttpClientModule

import  HttpClientModule  from '@angular/common/http';

这是一个 GET 示例:

getData<T>(func: string) 
    let opts = this.getOptions(func);
    return this.http.get<T>(this.app.url, opts);


getOptions(func: string) 
    let opts = 
        params: new HttpParams().set("func", func).set("nodeid", this.app.nodeid),
        headers: new HttpHeaders(),
        withCredentials: true
    ;
    return opts;

【讨论】:

谢谢你,这个工作对我来说是一个帖子。我怎样才能对获取请求做同样的事情? 我在使用 chrome 时出错:当请求的凭据模式时,响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”是“包括”。因此,Origin 'localhost:8100' 不允许访问。 XMLHttpRequest发起的请求的凭证模式由withCredentials属性控制。你知道该怎么做吗? 您可以查看此***.com/questions/8074665/… 或创建一个新问题。对于这种跨域问题,我将 ng serve 与代理设置一起使用,例如 ng serve --proxy-config proxy.conf.json。 如果这回答了您的问题,您可以将其标记为答案吗?谢谢

以上是关于Angular 5 HTTPClient 基本授权不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Angular HttpClient 阻塞授权标头

Angular 5 的 HttpClient:toPromise() 接受哪些参数?

HttpClient Angular 5 不发送请求

Angular 5,httpclient,跨域请求被阻止

Angular 5 HttpClient 与以前的 Http 相比有啥优势?

显示 Json 数组 Angular 5 HttpClient